diff --git a/docs/cn_components.md b/docs/cn_components.md
index 774f50ac2..a06375325 100644
--- a/docs/cn_components.md
+++ b/docs/cn_components.md
@@ -119,4 +119,4 @@ class Todo extends Omi.Component {
* 第3行，通过makeHTML方法把组件制作成可以在render中使用的标签。当然Omi.makeHTML(List);也可以写在List组件的代码下面。
* 第9行，通过设置this.childrenData可以把参数传递给子组件。this.childrenData是个数组，这样就支持多child的情况。
-* 第36行，在render方法中使用List组件。其中name方法可以让你在代码里通过this快速方法到该组件的实例。omi-id可以让你通过Omi.mapping['list']快速访问到组件对象的实例。
+* 第36行，在render方法中使用List组件。其中name方法可以让你在代码里通过this快速方法到该组件的实例。omi-id可以让你通过Omi.mapping['list']快速访问到组件对象的实例。
\ No newline at end of file
diff --git a/docs/cn_condition.md b/docs/cn_condition.md
index 54efffc12..f26fe60a6 100644
--- a/docs/cn_condition.md
+++ b/docs/cn_condition.md
@@ -65,4 +65,4 @@ class ConditionTest extends Omi.Component {
}
}
}
-```
+```
\ No newline at end of file
diff --git a/docs/cn_events.md b/docs/cn_events.md
index 7d483e739..5a4340050 100644
--- a/docs/cn_events.md
+++ b/docs/cn_events.md
@@ -107,4 +107,4 @@ class Pagination extends Omi.Component {
### 相关地址
* [演示地址](http://alloyteam.github.io/omi/example/pagination/)
-* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/pagination)
+* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/pagination)
\ No newline at end of file
diff --git a/docs/cn_hello_world.md b/docs/cn_hello_world.md
index 0ad2fc269..4ee8721f9 100644
--- a/docs/cn_hello_world.md
+++ b/docs/cn_hello_world.md
@@ -104,4 +104,4 @@ Omi.render(new Hello({ name : "Omi" }),"body");
';
}
...
-```
+```
\ No newline at end of file
diff --git a/docs/cn_installation.md b/docs/cn_installation.md
index 7cc90aa93..e435d2049 100644
--- a/docs/cn_installation.md
+++ b/docs/cn_installation.md
@@ -10,4 +10,4 @@ Omi是一款用于创建用户界面的组件化框架，开放并且现代，
``` js
npm install omi
-```
+```
\ No newline at end of file
diff --git a/docs/cn_lifecycle.md b/docs/cn_lifecycle.md
index ec5671bbd..d65568acd 100644
--- a/docs/cn_lifecycle.md
+++ b/docs/cn_lifecycle.md
@@ -52,6 +52,4 @@ class Timer extends Omi.Component {
return `Seconds Elapsed: {{secondsElapsed}}
`;
}
}
-```
-
-
+```
\ No newline at end of file
diff --git a/docs/cn_loop.md b/docs/cn_loop.md
index 05a605dae..784e81cf3 100644
--- a/docs/cn_loop.md
+++ b/docs/cn_loop.md
@@ -66,4 +66,4 @@ Omi.render(new List({
### 相关地址
* [演示地址](http://alloyteam.github.io/omi/example/loop/)
-* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/loop)
+* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/loop)
\ No newline at end of file
diff --git a/docs/cn_template.md b/docs/cn_template.md
index 67d7ab1ef..36c0df086 100644
--- a/docs/cn_template.md
+++ b/docs/cn_template.md
@@ -46,4 +46,4 @@ class List extends Omi.Component {
### 相关地址
* [演示地址](http://alloyteam.github.io/omi/example/artTemplate/)
-* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/artTemplate)
+* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/artTemplate)
\ No newline at end of file
diff --git a/docs/en_hello_world.md b/docs/en_hello_world.md
index 95102f353..9c721f31a 100644
--- a/docs/en_hello_world.md
+++ b/docs/en_hello_world.md
@@ -46,6 +46,4 @@ This code renders into body element.
```html
-```
-
-
+```
\ No newline at end of file
diff --git a/docs/en_installation.md b/docs/en_installation.md
index e4c59e9d6..07cecbdd6 100644
--- a/docs/en_installation.md
+++ b/docs/en_installation.md
@@ -10,4 +10,4 @@ To install Omi with npm, run:
``` js
npm install omi
-```
+```
\ No newline at end of file
diff --git a/website/component/content.js b/website/component/content.js
index 3894cbd10..4d856fa29 100644
--- a/website/component/content.js
+++ b/website/component/content.js
@@ -8,7 +8,7 @@ function getMarkDown(name,lan) {
function getMarkDownByArr(arr , lan) {
let md = "";
arr.forEach((item)=> {
- md += getMarkDown(item, lan);
+ md += getMarkDown(item, lan)+"\r\n \r\n";
})
return md;
diff --git a/website/dist/bundler.js b/website/dist/bundler.js
index 9fa343e4b..1601d6dcd 100644
--- a/website/dist/bundler.js
+++ b/website/dist/bundler.js
@@ -1766,7 +1766,7 @@
function getMarkDownByArr(arr, lan) {
var md = "";
arr.forEach(function (item) {
- md += getMarkDown(item, lan);
+ md += getMarkDown(item, lan) + "\r\n \r\n";
});
return md;
@@ -1845,49 +1845,49 @@
/* 12 */
/***/ function(module, exports) {
- module.exports = "module.exports = \"组件
\\r\\n\\r\\n我们希望开发者可以像搭积木一样制作Web程序，所以一切皆组件。\\r\\n\\r\\n### 简单组件\\r\\n\\r\\n这里我们使用Todo的例子来讲解Omi组件体系的使用。\\r\\n\\r\\n```js\\r\\nclass Todo extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n add (evt) {\\r\\n evt.preventDefault();\\r\\n this.data.items.push(this.data.text);\\r\\n this.data.text = '';\\r\\n this.update();\\r\\n }\\r\\n\\r\\n style () {\\r\\n return `\\r\\n h3 { color:red; }\\r\\n button{ color:green;}\\r\\n `;\\r\\n }\\r\\n\\r\\n handleChange(target){\\r\\n this.data.text = target.value;\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `\\r\\n
TODO
\\r\\n
{{#items}} - {{.}}
{{/items}}
\\r\\n
\\r\\n
{{#items}} - {{.}}
{{/items}}
`;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n怎么使用这个List？\\r\\n\\r\\n```js\\r\\nimport List from './list.js';\\r\\n\\r\\nOmi.makeHTML(List);\\r\\n\\r\\nclass Todo extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n this.data.length = this.data.items.length;\\r\\n this.childrenData = [ { items : this.data.items } ];\\r\\n }\\r\\n\\r\\n add (evt) {\\r\\n evt.preventDefault();\\r\\n this.list.data.items.push(this.data.text);\\r\\n this.data.length = this.list.data.items.length;\\r\\n this.data.text = '';\\r\\n this.update();\\r\\n }\\r\\n\\r\\n style () {\\r\\n return `\\r\\n h3 { color:red; }\\r\\n button{ color:green;}\\r\\n `;\\r\\n }\\r\\n\\r\\n handleChange(target){\\r\\n this.data.text = target.value;\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `\\r\\n
TODO
\\r\\n
\\r\\n \\r\\n `;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n* 第3行，通过makeHTML方法把组件制作成可以在render中使用的标签。当然Omi.makeHTML(List);也可以写在List组件的代码下面。\\r\\n* 第9行，通过设置this.childrenData可以把参数传递给子组件。this.childrenData是个数组，这样就支持多child的情况。\\r\\n* 第36行，在render方法中使用List组件。其中name方法可以让你在代码里通过this快速方法到该组件的实例。omi-id可以让你通过Omi.mapping['list']快速访问到组件对象的实例。\\r\\n\""
+ module.exports = "module.exports = \"组件
\\r\\n\\r\\n我们希望开发者可以像搭积木一样制作Web程序，所以一切皆组件。\\r\\n\\r\\n### 简单组件\\r\\n\\r\\n这里我们使用Todo的例子来讲解Omi组件体系的使用。\\r\\n\\r\\n```js\\r\\nclass Todo extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n add (evt) {\\r\\n evt.preventDefault();\\r\\n this.data.items.push(this.data.text);\\r\\n this.data.text = '';\\r\\n this.update();\\r\\n }\\r\\n\\r\\n style () {\\r\\n return `\\r\\n h3 { color:red; }\\r\\n button{ color:green;}\\r\\n `;\\r\\n }\\r\\n\\r\\n handleChange(target){\\r\\n this.data.text = target.value;\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `\\r\\n
TODO
\\r\\n
{{#items}} - {{.}}
{{/items}}
\\r\\n
\\r\\n
{{#items}} - {{.}}
{{/items}}
`;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n怎么使用这个List？\\r\\n\\r\\n```js\\r\\nimport List from './list.js';\\r\\n\\r\\nOmi.makeHTML(List);\\r\\n\\r\\nclass Todo extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n this.data.length = this.data.items.length;\\r\\n this.childrenData = [ { items : this.data.items } ];\\r\\n }\\r\\n\\r\\n add (evt) {\\r\\n evt.preventDefault();\\r\\n this.list.data.items.push(this.data.text);\\r\\n this.data.length = this.list.data.items.length;\\r\\n this.data.text = '';\\r\\n this.update();\\r\\n }\\r\\n\\r\\n style () {\\r\\n return `\\r\\n h3 { color:red; }\\r\\n button{ color:green;}\\r\\n `;\\r\\n }\\r\\n\\r\\n handleChange(target){\\r\\n this.data.text = target.value;\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `\\r\\n
TODO
\\r\\n
\\r\\n \\r\\n `;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n* 第3行，通过makeHTML方法把组件制作成可以在render中使用的标签。当然Omi.makeHTML(List);也可以写在List组件的代码下面。\\r\\n* 第9行，通过设置this.childrenData可以把参数传递给子组件。this.childrenData是个数组，这样就支持多child的情况。\\r\\n* 第36行，在render方法中使用List组件。其中name方法可以让你在代码里通过this快速方法到该组件的实例。omi-id可以让你通过Omi.mapping['list']快速访问到组件对象的实例。\""
/***/ },
/* 13 */
/***/ function(module, exports) {
- module.exports = "module.exports = \"条件判断
\\r\\n\\r\\n我们经常需要根据不同的状态呈现不同的界面，比如有的用户是vip要显示vip的Logo。Omi有许多种方式满足你的要求。\\r\\n\\r\\n### 方式一\\r\\n\\r\\n```js\\r\\nclass ConditionTest extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `{{#isVip}}\\r\\n you are VIP.
\\r\\n {{/isVip}}\\r\\n {{^isVip}}\\r\\n you are not VIP.
\\r\\n {{/isVip}}`;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n上面完全使用mustachejs的条件判断的语法。当然Omi不强制你使用mustachejs。你可以是omi.lite.js，然后重写Omi.template方法去使用任意你喜爱的模板引擎。\\r\\n\\r\\n### 方式二\\r\\n\\r\\n```js\\r\\nclass ConditionTest extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n render () {\\r\\n if(this.data.isVip){\\r\\n return 'you are VIP.
';\\r\\n }else{\\r\\n return 'you are not VIP.
';\\r\\n }\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\nrender就是提供了很好的可编程性，里面可以写任意js逻辑代码。对了，差点忘了，style方法里面也可以写js逻辑的。\\r\\n\\r\\n```js\\r\\nclass ConditionTest extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n style (){\\r\\n if(this.data.isVip){\\r\\n return 'div{ color : red; }';\\r\\n }else{\\r\\n return 'div{ color : green; }';\\r\\n }\\r\\n }\\r\\n\\r\\n render () {\\r\\n if(this.data.isVip){\\r\\n return 'you are VIP.
';\\r\\n }else{\\r\\n return 'you are not VIP.
';\\r\\n }\\r\\n }\\r\\n}\\r\\n```\\r\\n\""
+ module.exports = "module.exports = \"条件判断
\\r\\n\\r\\n我们经常需要根据不同的状态呈现不同的界面，比如有的用户是vip要显示vip的Logo。Omi有许多种方式满足你的要求。\\r\\n\\r\\n### 方式一\\r\\n\\r\\n```js\\r\\nclass ConditionTest extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `{{#isVip}}\\r\\n you are VIP.
\\r\\n {{/isVip}}\\r\\n {{^isVip}}\\r\\n you are not VIP.
\\r\\n {{/isVip}}`;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n上面完全使用mustachejs的条件判断的语法。当然Omi不强制你使用mustachejs。你可以是omi.lite.js，然后重写Omi.template方法去使用任意你喜爱的模板引擎。\\r\\n\\r\\n### 方式二\\r\\n\\r\\n```js\\r\\nclass ConditionTest extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n render () {\\r\\n if(this.data.isVip){\\r\\n return 'you are VIP.
';\\r\\n }else{\\r\\n return 'you are not VIP.
';\\r\\n }\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\nrender就是提供了很好的可编程性，里面可以写任意js逻辑代码。对了，差点忘了，style方法里面也可以写js逻辑的。\\r\\n\\r\\n```js\\r\\nclass ConditionTest extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n style (){\\r\\n if(this.data.isVip){\\r\\n return 'div{ color : red; }';\\r\\n }else{\\r\\n return 'div{ color : green; }';\\r\\n }\\r\\n }\\r\\n\\r\\n render () {\\r\\n if(this.data.isVip){\\r\\n return 'you are VIP.
';\\r\\n }else{\\r\\n return 'you are not VIP.
';\\r\\n }\\r\\n }\\r\\n}\\r\\n```\""
/***/ },
/* 14 */
/***/ function(module, exports) {
- module.exports = "module.exports = \"事件处理
\\r\\n\\r\\nOmi的事件分内置事件和自定义事件。在内置事件处理方面巧妙地利用了浏览器自身的管线机制，可以通过event和this轻松拿到事件实例和触发该事件的元素。\\r\\n\\r\\n### 内置事件\\r\\n\\r\\n什么算内置事件？只要下面正则能匹配到就算内置事件。\\r\\n\\r\\n```js\\r\\non(abort|blur|cancel|canplay|canplaythrough|change|click|close|contextmenu|cuechange|dblclick|drag|dragend|dragenter|dragleave|dragover|dragstart|drop|durationchange|emptied|ended|error|focus|input|invalid|keydown|keypress|keyup|load|loadeddata|loadedmetadata|loadstart|mousedown|mouseenter|mouseleave|mousemove|mouseout|mouseover|mouseup|mousewheel|pause|play|playing|progress|ratechange|reset|resize|scroll|seeked|seeking|select|show|stalled|submit|suspend|timeupdate|toggle|volumechange|waiting|autocomplete|autocompleteerror|beforecopy|beforecut|beforepaste|copy|cut|paste|search|selectstart|wheel|webkitfullscreenchange|webkitfullscreenerror|touchstart|touchmove|touchend|touchcancel|pointerdown|pointerup|pointercancel|pointermove|pointerover|pointerout|pointerenter|pointerleave)\\r\\n```\\r\\n\\r\\n内置事件怎么绑定？如下所示：\\r\\n\\r\\n```js\\r\\nclass EventTest extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n handleClick(dom, evt){\\r\\n alert(dom.innerHTML);\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `Hello, Omi!
`;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n### 自定义事件\\r\\n\\r\\n开发者自己定义的组件的事件，称为自定义事件。这里拿分页作为例子：\\r\\n\\r\\n```js\\r\\nimport Omi from '../../src/index.js';\\r\\nimport Pagination from './pagination.js';\\r\\nimport Content from './content.js';\\r\\n\\r\\nOmi.makeHTML(Pagination);\\r\\nOmi.makeHTML(Content);\\r\\n\\r\\nclass Main extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n installed(){\\r\\n this.content.goto(this.pagination.data.currentPage+1);\\r\\n }\\r\\n handlePageChange(index){\\r\\n this.content.goto(index+1);\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `\\r\\n
Pagination Example
\\r\\n
\\r\\n
\\r\\n
事件处理
\\r\\n\\r\\nOmi的事件分内置事件和自定义事件。在内置事件处理方面巧妙地利用了浏览器自身的管线机制，可以通过event和this轻松拿到事件实例和触发该事件的元素。\\r\\n\\r\\n### 内置事件\\r\\n\\r\\n什么算内置事件？只要下面正则能匹配到就算内置事件。\\r\\n\\r\\n```js\\r\\non(abort|blur|cancel|canplay|canplaythrough|change|click|close|contextmenu|cuechange|dblclick|drag|dragend|dragenter|dragleave|dragover|dragstart|drop|durationchange|emptied|ended|error|focus|input|invalid|keydown|keypress|keyup|load|loadeddata|loadedmetadata|loadstart|mousedown|mouseenter|mouseleave|mousemove|mouseout|mouseover|mouseup|mousewheel|pause|play|playing|progress|ratechange|reset|resize|scroll|seeked|seeking|select|show|stalled|submit|suspend|timeupdate|toggle|volumechange|waiting|autocomplete|autocompleteerror|beforecopy|beforecut|beforepaste|copy|cut|paste|search|selectstart|wheel|webkitfullscreenchange|webkitfullscreenerror|touchstart|touchmove|touchend|touchcancel|pointerdown|pointerup|pointercancel|pointermove|pointerover|pointerout|pointerenter|pointerleave)\\r\\n```\\r\\n\\r\\n内置事件怎么绑定？如下所示：\\r\\n\\r\\n```js\\r\\nclass EventTest extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n handleClick(dom, evt){\\r\\n alert(dom.innerHTML);\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `Hello, Omi!
`;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n### 自定义事件\\r\\n\\r\\n开发者自己定义的组件的事件，称为自定义事件。这里拿分页作为例子：\\r\\n\\r\\n```js\\r\\nimport Omi from '../../src/index.js';\\r\\nimport Pagination from './pagination.js';\\r\\nimport Content from './content.js';\\r\\n\\r\\nOmi.makeHTML(Pagination);\\r\\nOmi.makeHTML(Content);\\r\\n\\r\\nclass Main extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n installed(){\\r\\n this.content.goto(this.pagination.data.currentPage+1);\\r\\n }\\r\\n handlePageChange(index){\\r\\n this.content.goto(index+1);\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `\\r\\n
Pagination Example
\\r\\n
\\r\\n
\\r\\n
Hello World
\\r\\n\\r\\n你可以使用ES6+或者ES5的方式编写Omi程序来搭建你的Web程序。\\r\\n\\r\\n### Hello World with ES6+\\r\\n\\r\\n你可以使用 [webpack](https://webpack.github.io/) 打包工具，webpack会把你的模块代码打成一个很小的包，优化加载时间。使用[babel](http://babeljs.io/)，让你立刻马上使用ES6+来编写你的web程序。你只需要在webpack配置的module设置好[babel-loader](https://github.com/babel/babel-loader)便可。\\r\\n\\r\\n一个Omi的简短的例子如下所示:\\r\\n\\r\\n```js\\r\\nimport Omi from './omi.js';\\r\\n\\r\\nclass Hello extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n style () {\\r\\n return `\\r\\n h1{\\r\\n cursor:pointer;\\r\\n }\\r\\n `;\\r\\n }\\r\\n handleClick(target, evt){\\r\\n alert(target.innerHTML);\\r\\n }\\r\\n render() {\\r\\n return `\\r\\n \\r\\n
Hello ,{{name}}!
\\r\\n \\r\\n `;\\r\\n\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render(new Hello({ name : \\\"Omi\\\" }),\\\"body\\\");\\r\\n\\r\\n```\\r\\n\\r\\n组件生成的HTML最终会插入到body中。上面的例子展示了Omi的部分特性:\\r\\n\\r\\n- data传递: new Hello(data,..)的data可以直接提供给render方法里的模板\\r\\n- 局部CSS: h1只对render里的h1生效，不会污染外面的h1\\r\\n- 声明式事件绑定: onclick调用的就是组件内的handleClick，this可以拿到当然的DOM元素,还可以拿到当前的event\\r\\n\\r\\n你可以使用Omi.makeHTML来生成组件标签用于嵌套。\\r\\n```js\\r\\n Omi.makeHTML(Hello);\\r\\n```\\r\\n那么你就在其他组件中使用，如\\r\\n```js\\r\\n ...\\r\\n render() {\\r\\n return `\\r\\n \\r\\n `;\\r\\n }\\r\\n ...\\r\\n```\\r\\n\\r\\n\\r\\n### Hello World with ES5\\r\\n\\r\\n当然Omi没有抛弃ES5的用户。你可以使用ES5的方式编写Omi。如，在你的HTML中引用omi.js：\\r\\n\\r\\n```html\\r\\n\\r\\n```\\r\\n\\r\\n然后：\\r\\n\\r\\n```js\\r\\nvar Hello = Omi.create(\\\"Hello\\\", {\\r\\n style: function () {\\r\\n return \\\"h1{ cursor:pointer }\\\";\\r\\n },\\r\\n handleClick: function (dom) {\\r\\n alert(dom.innerHTML);\\r\\n },\\r\\n render: function () {\\r\\n return '\\\\\\r\\n
Hello ,{{name}}!
\\\\\\r\\n ';\\r\\n }\\r\\n});\\r\\n\\r\\nOmi.render(new Hello({ name : \\\"Omi\\\" }),\\\"body\\\");\\r\\n```\\r\\n当然除了在HTML引入脚步，你还可以使用AMD、CMD或者CommonJS的方式引入Omi，这里就不再一一列举。\\r\\n\\r\\n需要注意的是，Omi.create的第一个参数Hello是用来生成Tag Name的。你可以在其他地方嵌入你的组件。如：\\r\\n\\r\\n```js\\r\\n ...\\r\\n render:function() {\\r\\n return '\\\\\\r\\n
Test
\\\\\\r\\n
\\\\\\r\\n
Hello World
\\r\\n\\r\\n你可以使用ES6+或者ES5的方式编写Omi程序来搭建你的Web程序。\\r\\n\\r\\n### Hello World with ES6+\\r\\n\\r\\n你可以使用 [webpack](https://webpack.github.io/) 打包工具，webpack会把你的模块代码打成一个很小的包，优化加载时间。使用[babel](http://babeljs.io/)，让你立刻马上使用ES6+来编写你的web程序。你只需要在webpack配置的module设置好[babel-loader](https://github.com/babel/babel-loader)便可。\\r\\n\\r\\n一个Omi的简短的例子如下所示:\\r\\n\\r\\n```js\\r\\nimport Omi from './omi.js';\\r\\n\\r\\nclass Hello extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n style () {\\r\\n return `\\r\\n h1{\\r\\n cursor:pointer;\\r\\n }\\r\\n `;\\r\\n }\\r\\n handleClick(target, evt){\\r\\n alert(target.innerHTML);\\r\\n }\\r\\n render() {\\r\\n return `\\r\\n \\r\\n
Hello ,{{name}}!
\\r\\n \\r\\n `;\\r\\n\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render(new Hello({ name : \\\"Omi\\\" }),\\\"body\\\");\\r\\n\\r\\n```\\r\\n\\r\\n组件生成的HTML最终会插入到body中。上面的例子展示了Omi的部分特性:\\r\\n\\r\\n- data传递: new Hello(data,..)的data可以直接提供给render方法里的模板\\r\\n- 局部CSS: h1只对render里的h1生效，不会污染外面的h1\\r\\n- 声明式事件绑定: onclick调用的就是组件内的handleClick，this可以拿到当然的DOM元素,还可以拿到当前的event\\r\\n\\r\\n你可以使用Omi.makeHTML来生成组件标签用于嵌套。\\r\\n```js\\r\\n Omi.makeHTML(Hello);\\r\\n```\\r\\n那么你就在其他组件中使用，如\\r\\n```js\\r\\n ...\\r\\n render() {\\r\\n return `\\r\\n \\r\\n `;\\r\\n }\\r\\n ...\\r\\n```\\r\\n\\r\\n\\r\\n### Hello World with ES5\\r\\n\\r\\n当然Omi没有抛弃ES5的用户。你可以使用ES5的方式编写Omi。如，在你的HTML中引用omi.js：\\r\\n\\r\\n```html\\r\\n\\r\\n```\\r\\n\\r\\n然后：\\r\\n\\r\\n```js\\r\\nvar Hello = Omi.create(\\\"Hello\\\", {\\r\\n style: function () {\\r\\n return \\\"h1{ cursor:pointer }\\\";\\r\\n },\\r\\n handleClick: function (dom) {\\r\\n alert(dom.innerHTML);\\r\\n },\\r\\n render: function () {\\r\\n return '\\\\\\r\\n
Hello ,{{name}}!
\\\\\\r\\n ';\\r\\n }\\r\\n});\\r\\n\\r\\nOmi.render(new Hello({ name : \\\"Omi\\\" }),\\\"body\\\");\\r\\n```\\r\\n当然除了在HTML引入脚步，你还可以使用AMD、CMD或者CommonJS的方式引入Omi，这里就不再一一列举。\\r\\n\\r\\n需要注意的是，Omi.create的第一个参数Hello是用来生成Tag Name的。你可以在其他地方嵌入你的组件。如：\\r\\n\\r\\n```js\\r\\n ...\\r\\n render:function() {\\r\\n return '\\\\\\r\\n
Test
\\\\\\r\\n
\\\\\\r\\n
安装
\\n\\nOmi是一款用于创建用户界面的组件化框架，开放并且现代，故得名：Omi。\\n\\n### 安装 Omi\\n\\n我们推荐使用 [npm](https://www.npmjs.com/) 来管理你的前端依赖.\\n\\n通过npm安装Omi，你只需要执行下面的命令:\\n\\n``` js\\nnpm install omi\\n```\\n\""
+ module.exports = "module.exports = \"安装
\\n\\nOmi是一款用于创建用户界面的组件化框架，开放并且现代，故得名：Omi。\\n\\n### 安装 Omi\\n\\n我们推荐使用 [npm](https://www.npmjs.com/) 来管理你的前端依赖.\\n\\n通过npm安装Omi，你只需要执行下面的命令:\\n\\n``` js\\nnpm install omi\\n```\""
/***/ },
/* 17 */
/***/ function(module, exports) {
- module.exports = "module.exports = \"生命周期
\\r\\n\\r\\n\\r\\n| 名称 | 含义 | 时机 |\\r\\n| :-------------: |:-------------:|: -----:|\\r\\n| constructor | 构造函数 | new的时候 |\\r\\n| install | 初始化安装，这可以拿到用户传进的data进行处理 | 实例化 |\\r\\n| installed | 安装完成，HTML已经插入页面之后执行。注意：组件被remove之后再进行restore也会执行 | ** 实例化和存在期 ** |\\r\\n| uninstall | 卸载组件。执行remove方法会触发该事件 | 销毁时 |\\r\\n| beforeUpdate | 更新前 | 存在期 |\\r\\n| afterUpdate | 更新后 | 存在期 |\\r\\n\\r\\n## 示意图\\r\\n\\r\\n\\r\\n \\r\\n需要注意的是installed在实例化期也会执行，上图没有标出。比如组件被移除再进行还原会执行，再比如新增新的组件也会执行。\\r\\n \\r\\n### 举个例子\\r\\n\\r\\n```js\\r\\nclass Timer extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n install () {\\r\\n this.data = {secondsElapsed: 0};\\r\\n }\\r\\n\\r\\n tick() {\\r\\n this.data.secondsElapsed++;\\r\\n this.update();\\r\\n }\\r\\n\\r\\n installed(){\\r\\n this.interval = setInterval(() => this.tick(), 1000);\\r\\n }\\r\\n\\r\\n uninstall() {\\r\\n clearInterval(this.interval);\\r\\n }\\r\\n\\r\\n\\r\\n style () {\\r\\n return `\\r\\n .num { color:red; }\\r\\n `;\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `Seconds Elapsed: {{secondsElapsed}}
`;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n\\r\\n\""
+ module.exports = "module.exports = \"生命周期
\\r\\n\\r\\n\\r\\n| 名称 | 含义 | 时机 |\\r\\n| :-------------: |:-------------:|: -----:|\\r\\n| constructor | 构造函数 | new的时候 |\\r\\n| install | 初始化安装，这可以拿到用户传进的data进行处理 | 实例化 |\\r\\n| installed | 安装完成，HTML已经插入页面之后执行。注意：组件被remove之后再进行restore也会执行 | ** 实例化和存在期 ** |\\r\\n| uninstall | 卸载组件。执行remove方法会触发该事件 | 销毁时 |\\r\\n| beforeUpdate | 更新前 | 存在期 |\\r\\n| afterUpdate | 更新后 | 存在期 |\\r\\n\\r\\n## 示意图\\r\\n\\r\\n\\r\\n \\r\\n需要注意的是installed在实例化期也会执行，上图没有标出。比如组件被移除再进行还原会执行，再比如新增新的组件也会执行。\\r\\n \\r\\n### 举个例子\\r\\n\\r\\n```js\\r\\nclass Timer extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n install () {\\r\\n this.data = {secondsElapsed: 0};\\r\\n }\\r\\n\\r\\n tick() {\\r\\n this.data.secondsElapsed++;\\r\\n this.update();\\r\\n }\\r\\n\\r\\n installed(){\\r\\n this.interval = setInterval(() => this.tick(), 1000);\\r\\n }\\r\\n\\r\\n uninstall() {\\r\\n clearInterval(this.interval);\\r\\n }\\r\\n\\r\\n\\r\\n style () {\\r\\n return `\\r\\n .num { color:red; }\\r\\n `;\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `Seconds Elapsed: {{secondsElapsed}}
`;\\r\\n }\\r\\n}\\r\\n```\""
/***/ },
/* 18 */
/***/ function(module, exports) {
- module.exports = "module.exports = \"循环遍历
\\r\\n\\r\\n下面介绍mustache.js的方式和javascript遍历的方式。\\r\\n\\r\\n### 方式一\\r\\n\\r\\n```js\\r\\nclass List extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `\\r\\n
{{#items}} - {{text}}
{{/items}}
\\r\\n
\\r\\n
\\r\\n ` + this.data.items.map(item =>\\r\\n '- ' + item.text + '
'\\r\\n ).join(\\\"\\\") + `\\r\\n
\\r\\n
循环遍历
\\r\\n\\r\\n下面介绍mustache.js的方式和javascript遍历的方式。\\r\\n\\r\\n### 方式一\\r\\n\\r\\n```js\\r\\nclass List extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `\\r\\n
{{#items}} - {{text}}
{{/items}}
\\r\\n
\\r\\n
\\r\\n ` + this.data.items.map(item =>\\r\\n '- ' + item.text + '
'\\r\\n ).join(\\\"\\\") + `\\r\\n
\\r\\n
模板切换
\\r\\n\\r\\nOmi有三个版本。其中的omi.js和omi.lite.js属于Web端使用的版本。\\r\\n\\r\\n* omi.js内置了[mustache.js](https://github.com/janl/mustache.js)作为模版引擎\\r\\n* omi.lite.js不包含任何模版引擎\\r\\n\\r\\nOmi不强制开发者使用mustache.js，你可以根据业务场景使用任意模板引擎或者不使用模板引擎。\\r\\n\\r\\n那么怎么使用别的模板引擎？下面拿[artTemplate](https://github.com/aui/artTemplate)作为例子。\\r\\n\\r\\n### 使用artTemplate\\r\\n\\r\\n```js\\r\\nOmi.template = function(tpl, data){\\r\\n return artTemplate.compile(tpl)(data);\\r\\n}\\r\\n```\\r\\n重写Omi.template方法，tpl为传入的模板，data为模板所需的数据，返回值为HTML。\\r\\n重写完毕后就能在render使用artTemplate的语法，如：\\r\\n\\r\\n```js\\r\\nclass List extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n style () {\\r\\n return `\\r\\n h1 { color:red; }\\r\\n li{ color:green;}\\r\\n `;\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `{{title}}
\\r\\n \\r\\n {{each list as value i}}\\r\\n - 索引 {{i + 1}} ：{{value}}
\\r\\n {{/each}}\\r\\n
`;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n### 相关地址\\r\\n\\r\\n* [演示地址](http://alloyteam.github.io/omi/example/artTemplate/)\\r\\n* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/artTemplate)\\r\\n\""
+ module.exports = "module.exports = \"模板切换
\\r\\n\\r\\nOmi有三个版本。其中的omi.js和omi.lite.js属于Web端使用的版本。\\r\\n\\r\\n* omi.js内置了[mustache.js](https://github.com/janl/mustache.js)作为模版引擎\\r\\n* omi.lite.js不包含任何模版引擎\\r\\n\\r\\nOmi不强制开发者使用mustache.js，你可以根据业务场景使用任意模板引擎或者不使用模板引擎。\\r\\n\\r\\n那么怎么使用别的模板引擎？下面拿[artTemplate](https://github.com/aui/artTemplate)作为例子。\\r\\n\\r\\n### 使用artTemplate\\r\\n\\r\\n```js\\r\\nOmi.template = function(tpl, data){\\r\\n return artTemplate.compile(tpl)(data);\\r\\n}\\r\\n```\\r\\n重写Omi.template方法，tpl为传入的模板，data为模板所需的数据，返回值为HTML。\\r\\n重写完毕后就能在render使用artTemplate的语法，如：\\r\\n\\r\\n```js\\r\\nclass List extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n\\r\\n style () {\\r\\n return `\\r\\n h1 { color:red; }\\r\\n li{ color:green;}\\r\\n `;\\r\\n }\\r\\n\\r\\n render () {\\r\\n return `{{title}}
\\r\\n \\r\\n {{each list as value i}}\\r\\n - 索引 {{i + 1}} ：{{value}}
\\r\\n {{/each}}\\r\\n
`;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n### 相关地址\\r\\n\\r\\n* [演示地址](http://alloyteam.github.io/omi/example/artTemplate/)\\r\\n* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/artTemplate)\""
/***/ },
/* 20 */
@@ -1899,13 +1899,13 @@
/* 21 */
/***/ function(module, exports) {
- module.exports = "module.exports = \"Hello World
\\r\\n\\r\\n\\r\\n### Hello World with ES20XX \\r\\n\\r\\nWe recommend using a bundler like [webpack](https://webpack.github.io/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time.\\r\\n\\r\\nThe small Omi example looks like this:\\r\\n\\r\\n```js\\r\\nimport Omi from './omi.js';\\r\\n\\r\\nclass Hello extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n style () {\\r\\n return `\\r\\n h1{\\r\\n cursor:pointer;\\r\\n }\\r\\n `;\\r\\n }\\r\\n handleClick(target){\\r\\n alert(target.innerHTML);\\r\\n }\\r\\n render() {\\r\\n return `\\r\\n \\r\\n
Hello ,{{name}}!
\\r\\n \\r\\n `;\\r\\n\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render(new Hello({ name : \\\"Omi\\\" }),\\\"body\\\");\\r\\n\\r\\n```\\r\\n\\r\\nThis code renders into body element. \\r\\n\\r\\n\\r\\n### Hello World with ES5\\r\\n\\r\\n\\r\\n```html\\r\\n\\r\\n```\\r\\n\\r\\n\\r\\n\""
+ module.exports = "module.exports = \"Hello World
\\r\\n\\r\\n\\r\\n### Hello World with ES20XX \\r\\n\\r\\nWe recommend using a bundler like [webpack](https://webpack.github.io/) or [Browserify](http://browserify.org/) so you can write modular code and bundle it together into small packages to optimize load time.\\r\\n\\r\\nThe small Omi example looks like this:\\r\\n\\r\\n```js\\r\\nimport Omi from './omi.js';\\r\\n\\r\\nclass Hello extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n style () {\\r\\n return `\\r\\n h1{\\r\\n cursor:pointer;\\r\\n }\\r\\n `;\\r\\n }\\r\\n handleClick(target){\\r\\n alert(target.innerHTML);\\r\\n }\\r\\n render() {\\r\\n return `\\r\\n \\r\\n
Hello ,{{name}}!
\\r\\n \\r\\n `;\\r\\n\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render(new Hello({ name : \\\"Omi\\\" }),\\\"body\\\");\\r\\n\\r\\n```\\r\\n\\r\\nThis code renders into body element. \\r\\n\\r\\n\\r\\n### Hello World with ES5\\r\\n\\r\\n\\r\\n```html\\r\\n\\r\\n```\""
/***/ },
/* 22 */
/***/ function(module, exports) {
- module.exports = "module.exports = \"Installation
\\r\\n\\r\\nOmi is open and modern framework for building user interfaces.\\r\\n\\r\\n### Installing Omi\\r\\n\\r\\nWe recommend using [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers.\\r\\n\\r\\nTo install Omi with npm, run:\\r\\n\\r\\n``` js\\r\\nnpm install omi\\r\\n```\\r\\n\""
+ module.exports = "module.exports = \"Installation
\\r\\n\\r\\nOmi is open and modern framework for building user interfaces.\\r\\n\\r\\n### Installing Omi\\r\\n\\r\\nWe recommend using [npm](https://www.npmjs.com/) for managing front-end dependencies. If you're new to package managers.\\r\\n\\r\\nTo install Omi with npm, run:\\r\\n\\r\\n``` js\\r\\nnpm install omi\\r\\n```\""
/***/ },
/* 23 */