DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add \r\n to the end of md

This commit is contained in:
kmdjs 2017-01-23 09:30:16 +08:00
parent aaa8e93e65
commit 319b14b477
12 changed files with 22 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/cn_components.md
View File

@ -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']快速访问到组件对象的实例。

2
docs/cn_condition.md
View File

@ -65,4 +65,4 @@ class ConditionTest extends Omi.Component {
}
}
}
```
```

2
docs/cn_events.md
View File

@ -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)

2
docs/cn_hello_world.md
View File

@ -104,4 +104,4 @@ Omi.render(new Hello({ name : "Omi" }),"body");
</div>';
}
...
```
```

2
docs/cn_installation.md
View File

@ -10,4 +10,4 @@ Omi是一款用于创建用户界面的组件化框架，开放并且现代，
``` js
npm install omi
```
```

4
docs/cn_lifecycle.md
View File

@ -52,6 +52,4 @@ class Timer extends Omi.Component {
return `<div>Seconds Elapsed:<span class="num"> {{secondsElapsed}}</span></div>`;
}
}
```
```

2
docs/cn_loop.md
View File

@ -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)

2
docs/cn_template.md
View File

@ -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)

4
docs/en_hello_world.md
View File

@ -46,6 +46,4 @@ This code renders into body element.
```html
<script src="omi.js"></script>
```
```

2
docs/en_installation.md
View File

@ -10,4 +10,4 @@ To install Omi with npm, run:
``` js
npm install omi
```
```

2
website/component/content.js
View File

@ -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;

22
website/dist/bundler.js vendored
View File

@ -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 = \"<h2 id=\\\"组件\\\">组件</h2>\\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 `<div>\\r\\n <h3>TODO</h3>\\r\\n <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>\\r\\n <form onsubmit=\\\"add(event)\\\" >\\r\\n <input type=\\\"text\\\" onchange=\\\"handleChange(this)\\\" value=\\\"{{text}}\\\" />\\r\\n <button>Add #{{items.length}}</button>\\r\\n </form>\\r\\n </div>`;\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render(new Todo({ items: [] ,text : '' }),\\\"body\\\");\\r\\n```\\r\\n\\r\\n组件生成的HTML最终会插入到body中。上面的例子展示了Omi的部分特性:\\r\\n\\r\\n- data传递: new Todo(data,..)的data可以直接提供给render方法里的模板\\r\\n- 局部CSS: h3只对render里的h3生效，不会污染外面的h3；button也是同样的\\r\\n- 声明式事件绑定: onchange调用的就是组件内的handleChange，this可以拿到当然的DOM元素,还可以拿到当前的event\\r\\n- 需要手动调用update方法才能更新组件\\r\\n\\r\\n这里需要特别强调的是，为了更加的自由和灵活度。Omi没有内置数据变更的自动更新，需要开发者自己调用update方法。\\r\\n你也可以和[oba](https://github.com/kmdjs/oba)或者mobx一起使用来实现自动更新。\\r\\n\\r\\n### 组件嵌套\\r\\n\\r\\n几乎所有的Web网页或者Web应用，我们需要嵌套我们定义的组件来完成所有的功能和展示。比如上面的Todo，我们也是可以抽取出List。\\r\\n这样有什么好处？易维护、可扩展、方便复用。如，我们抽取去List：\\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 `<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>`;\\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 `<div>\\r\\n <h3>TODO</h3>\\r\\n <List omi-id=\\\"list\\\" name=\\\"list\\\" />\\r\\n <form onsubmit=\\\"add(event)\\\" >\\r\\n <input type=\\\"text\\\" onchange=\\\"handleChange(this)\\\" value=\\\"{{text}}\\\" />\\r\\n <button>Add #{{length}}</button>\\r\\n </form>\\r\\n </div>`;\\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 = \"<h2 id=\\\"组件\\\">组件</h2>\\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 `<div>\\r\\n <h3>TODO</h3>\\r\\n <ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>\\r\\n <form onsubmit=\\\"add(event)\\\" >\\r\\n <input type=\\\"text\\\" onchange=\\\"handleChange(this)\\\" value=\\\"{{text}}\\\" />\\r\\n <button>Add #{{items.length}}</button>\\r\\n </form>\\r\\n </div>`;\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render(new Todo({ items: [] ,text : '' }),\\\"body\\\");\\r\\n```\\r\\n\\r\\n组件生成的HTML最终会插入到body中。上面的例子展示了Omi的部分特性:\\r\\n\\r\\n- data传递: new Todo(data,..)的data可以直接提供给render方法里的模板\\r\\n- 局部CSS: h3只对render里的h3生效，不会污染外面的h3；button也是同样的\\r\\n- 声明式事件绑定: onchange调用的就是组件内的handleChange，this可以拿到当然的DOM元素,还可以拿到当前的event\\r\\n- 需要手动调用update方法才能更新组件\\r\\n\\r\\n这里需要特别强调的是，为了更加的自由和灵活度。Omi没有内置数据变更的自动更新，需要开发者自己调用update方法。\\r\\n你也可以和[oba](https://github.com/kmdjs/oba)或者mobx一起使用来实现自动更新。\\r\\n\\r\\n### 组件嵌套\\r\\n\\r\\n几乎所有的Web网页或者Web应用，我们需要嵌套我们定义的组件来完成所有的功能和展示。比如上面的Todo，我们也是可以抽取出List。\\r\\n这样有什么好处？易维护、可扩展、方便复用。如，我们抽取去List：\\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 `<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>`;\\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 `<div>\\r\\n <h3>TODO</h3>\\r\\n <List omi-id=\\\"list\\\" name=\\\"list\\\" />\\r\\n <form onsubmit=\\\"add(event)\\\" >\\r\\n <input type=\\\"text\\\" onchange=\\\"handleChange(this)\\\" value=\\\"{{text}}\\\" />\\r\\n <button>Add #{{length}}</button>\\r\\n </form>\\r\\n </div>`;\\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 = \"<h2 id=\\\"条件判断\\\">条件判断</h2>\\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 <div>you are VIP.</div>\\r\\n {{/isVip}}\\r\\n {{^isVip}}\\r\\n <div>you are not VIP.</div>\\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 '<div>you are VIP.</div>';\\r\\n }else{\\r\\n return '<div>you are not VIP.</div>';\\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 '<div>you are VIP.</div>';\\r\\n }else{\\r\\n return '<div>you are not VIP.</div>';\\r\\n }\\r\\n }\\r\\n}\\r\\n```\\r\\n\""
module.exports = "module.exports = \"<h2 id=\\\"条件判断\\\">条件判断</h2>\\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 <div>you are VIP.</div>\\r\\n {{/isVip}}\\r\\n {{^isVip}}\\r\\n <div>you are not VIP.</div>\\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 '<div>you are VIP.</div>';\\r\\n }else{\\r\\n return '<div>you are not VIP.</div>';\\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 '<div>you are VIP.</div>';\\r\\n }else{\\r\\n return '<div>you are not VIP.</div>';\\r\\n }\\r\\n }\\r\\n}\\r\\n```\""
/***/ },
/* 14 */
/***/ function(module, exports) {
module.exports = "module.exports = \"<h2 id=\\\"事件处理\\\">事件处理</h2>\\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 `<div onclick=\\\"handleClick(this, event)\\\">Hello, Omi!</div>`;\\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 `<div>\\r\\n <h1>Pagination Example</h1>\\r\\n <Content name=\\\"content\\\" />\\r\\n <Pagination\\r\\n name=\\\"pagination\\\"\\r\\n data-total=\\\"100\\\"\\r\\n data-page-size=\\\"10\\\"\\r\\n data-num-edge=\\\"1\\\"\\r\\n data-num-display=\\\"4\\\"　　　　　\\r\\n onPageChange=\\\"handlePageChange\\\" />\\r\\n </div>`;\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render( new Main(),'body');\\r\\n```\\r\\n\\r\\n如上面的onPageChange就是自定义事件，触发会执行handlePageChange。onPageChange方法是在Pagination中执行：\\r\\n\\r\\n```js\\r\\nimport Omi from '../../src/index.js';\\r\\n\\r\\nclass Pagination extends Omi.Component {\\r\\n ...\\r\\n ...\\r\\n ...\\r\\n linkTo: \\\"#\\\",\\r\\n prevText: \\\"Prev\\\",\\r\\n nextText: \\\"Next\\\",\\r\\n ellipseText: \\\"...\\\",\\r\\n prevShow: true,\\r\\n nextShow: true,\\r\\n onPageChange: function () { return false; }\\r\\n }, this.data);\\r\\n\\r\\n this.pageNum = Math.ceil(this.data.total / this.data.pageSize);\\r\\n }\\r\\n goto (index,evt) {\\r\\n evt.preventDefault();\\r\\n this.data.currentPage=index;\\r\\n this.update();\\r\\n this.data.onPageChange(index);\\r\\n }\\r\\n ...\\r\\n ...\\r\\n ...\\r\\n}\\r\\n```\\r\\n\\r\\n这里取了Pagination组件的部分代码。高亮的就是执行onPageChange的地方。\\r\\n\\r\\n### 相关地址\\r\\n\\r\\n* [演示地址](http://alloyteam.github.io/omi/example/pagination/)\\r\\n* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/pagination)\\r\\n\""
module.exports = "module.exports = \"<h2 id=\\\"事件处理\\\">事件处理</h2>\\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 `<div onclick=\\\"handleClick(this, event)\\\">Hello, Omi!</div>`;\\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 `<div>\\r\\n <h1>Pagination Example</h1>\\r\\n <Content name=\\\"content\\\" />\\r\\n <Pagination\\r\\n name=\\\"pagination\\\"\\r\\n data-total=\\\"100\\\"\\r\\n data-page-size=\\\"10\\\"\\r\\n data-num-edge=\\\"1\\\"\\r\\n data-num-display=\\\"4\\\"　　　　　\\r\\n onPageChange=\\\"handlePageChange\\\" />\\r\\n </div>`;\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render( new Main(),'body');\\r\\n```\\r\\n\\r\\n如上面的onPageChange就是自定义事件，触发会执行handlePageChange。onPageChange方法是在Pagination中执行：\\r\\n\\r\\n```js\\r\\nimport Omi from '../../src/index.js';\\r\\n\\r\\nclass Pagination extends Omi.Component {\\r\\n ...\\r\\n ...\\r\\n ...\\r\\n linkTo: \\\"#\\\",\\r\\n prevText: \\\"Prev\\\",\\r\\n nextText: \\\"Next\\\",\\r\\n ellipseText: \\\"...\\\",\\r\\n prevShow: true,\\r\\n nextShow: true,\\r\\n onPageChange: function () { return false; }\\r\\n }, this.data);\\r\\n\\r\\n this.pageNum = Math.ceil(this.data.total / this.data.pageSize);\\r\\n }\\r\\n goto (index,evt) {\\r\\n evt.preventDefault();\\r\\n this.data.currentPage=index;\\r\\n this.update();\\r\\n this.data.onPageChange(index);\\r\\n }\\r\\n ...\\r\\n ...\\r\\n ...\\r\\n}\\r\\n```\\r\\n\\r\\n这里取了Pagination组件的部分代码。高亮的就是执行onPageChange的地方。\\r\\n\\r\\n### 相关地址\\r\\n\\r\\n* [演示地址](http://alloyteam.github.io/omi/example/pagination/)\\r\\n* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/pagination)\""
/***/ },
/* 15 */
/***/ function(module, exports) {
module.exports = "module.exports = \"<h2 id=\\\"Hello World\\\">Hello World</h2>\\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 <div>\\r\\n <h1 onclick=\\\"handleClick(this, event)\\\">Hello ,{{name}}!</h1>\\r\\n </div>\\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 <div>\\r\\n <div>Test</div>\\r\\n <Hello data-name=\\\"Omi\\\" />\\r\\n </div>\\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<script src=\\\"omi.js\\\"></script>\\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 '<div>\\\\\\r\\n <h1 onclick=\\\"handleClick(this, event)\\\">Hello ,{{name}}!</h1>\\\\\\r\\n </div>';\\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 '<div>\\\\\\r\\n <div>Test</div>\\\\\\r\\n <Hello data-name=\\\"Omi\\\" />\\\\\\r\\n </div>';\\r\\n }\\r\\n ...\\r\\n```\\r\\n\""
module.exports = "module.exports = \"<h2 id=\\\"Hello World\\\">Hello World</h2>\\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 <div>\\r\\n <h1 onclick=\\\"handleClick(this, event)\\\">Hello ,{{name}}!</h1>\\r\\n </div>\\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 <div>\\r\\n <div>Test</div>\\r\\n <Hello data-name=\\\"Omi\\\" />\\r\\n </div>\\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<script src=\\\"omi.js\\\"></script>\\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 '<div>\\\\\\r\\n <h1 onclick=\\\"handleClick(this, event)\\\">Hello ,{{name}}!</h1>\\\\\\r\\n </div>';\\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 '<div>\\\\\\r\\n <div>Test</div>\\\\\\r\\n <Hello data-name=\\\"Omi\\\" />\\\\\\r\\n </div>';\\r\\n }\\r\\n ...\\r\\n```\""
/***/ },
/* 16 */
/***/ function(module, exports) {
module.exports = "module.exports = \"<h2 id=\\\"安装\\\">安装</h2>\\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 = \"<h2 id=\\\"安装\\\">安装</h2>\\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 = \"<h2 id=\\\"生命周期\\\">生命周期</h2>\\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![lc](http://images2015.cnblogs.com/blog/105416/201701/105416-20170119153018546-1566368987.png)\\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 `<div>Seconds Elapsed:<span class=\\\"num\\\"> {{secondsElapsed}}</span></div>`;\\r\\n }\\r\\n}\\r\\n```\\r\\n\\r\\n\\r\\n\""
module.exports = "module.exports = \"<h2 id=\\\"生命周期\\\">生命周期</h2>\\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![lc](http://images2015.cnblogs.com/blog/105416/201701/105416-20170119153018546-1566368987.png)\\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 `<div>Seconds Elapsed:<span class=\\\"num\\\"> {{secondsElapsed}}</span></div>`;\\r\\n }\\r\\n}\\r\\n```\""
/***/ },
/* 18 */
/***/ function(module, exports) {
module.exports = "module.exports = \"<h2 id=\\\"循环遍历\\\">循环遍历</h2>\\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 `<div>\\r\\n <ul> {{#items}} <li id=\\\"{{id}}\\\">{{text}}</li> {{/items}}</ul>\\r\\n </div>`;\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render(new List({\\r\\n items: [\\r\\n {id: 1, text: 'Omi'},\\r\\n {id: 2, text: 'dntzhang'},\\r\\n {id: 3, text: 'AlloyTeam'}\\r\\n ]\\r\\n}),\\\"body\\\");\\r\\n```\\r\\n\\r\\nmustache.js更详细的循环遍历使用可看[https://github.com/janl/mustache.js#non-empty-lists](https://github.com/janl/mustache.js#non-empty-lists)。 比如还支持：\\r\\n\\r\\n* 如果items的每一项是字符串，可以直接**{{.}}**的方式来输出每一项\\r\\n* 循环的时候调用定义好的函数\\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 `<div>\\r\\n <ul>\\r\\n ` + this.data.items.map(item =>\\r\\n '<li id=\\\"' + item.id + '\\\">' + item.text + '</li>'\\r\\n ).join(\\\"\\\") + `\\r\\n </ul>\\r\\n </div>`;\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render(new List({\\r\\n items: [\\r\\n {id: 1, text: 'Omi'},\\r\\n {id: 2, text: 'dntzhang'},\\r\\n {id: 3, text: 'AlloyTeam'}\\r\\n ]\\r\\n}),\\\"body\\\");\\r\\n```\\r\\n\\r\\n你将在页面看到如下效果:\\r\\n\\r\\n![pv](http://images2015.cnblogs.com/blog/105416/201701/105416-20170122095724129-2059595233.png)\\r\\n\\r\\n### 相关地址\\r\\n\\r\\n* [演示地址](http://alloyteam.github.io/omi/example/loop/)\\r\\n* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/loop)\\r\\n\""
module.exports = "module.exports = \"<h2 id=\\\"循环遍历\\\">循环遍历</h2>\\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 `<div>\\r\\n <ul> {{#items}} <li id=\\\"{{id}}\\\">{{text}}</li> {{/items}}</ul>\\r\\n </div>`;\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render(new List({\\r\\n items: [\\r\\n {id: 1, text: 'Omi'},\\r\\n {id: 2, text: 'dntzhang'},\\r\\n {id: 3, text: 'AlloyTeam'}\\r\\n ]\\r\\n}),\\\"body\\\");\\r\\n```\\r\\n\\r\\nmustache.js更详细的循环遍历使用可看[https://github.com/janl/mustache.js#non-empty-lists](https://github.com/janl/mustache.js#non-empty-lists)。 比如还支持：\\r\\n\\r\\n* 如果items的每一项是字符串，可以直接**{{.}}**的方式来输出每一项\\r\\n* 循环的时候调用定义好的函数\\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 `<div>\\r\\n <ul>\\r\\n ` + this.data.items.map(item =>\\r\\n '<li id=\\\"' + item.id + '\\\">' + item.text + '</li>'\\r\\n ).join(\\\"\\\") + `\\r\\n </ul>\\r\\n </div>`;\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render(new List({\\r\\n items: [\\r\\n {id: 1, text: 'Omi'},\\r\\n {id: 2, text: 'dntzhang'},\\r\\n {id: 3, text: 'AlloyTeam'}\\r\\n ]\\r\\n}),\\\"body\\\");\\r\\n```\\r\\n\\r\\n你将在页面看到如下效果:\\r\\n\\r\\n![pv](http://images2015.cnblogs.com/blog/105416/201701/105416-20170122095724129-2059595233.png)\\r\\n\\r\\n### 相关地址\\r\\n\\r\\n* [演示地址](http://alloyteam.github.io/omi/example/loop/)\\r\\n* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/loop)\""
/***/ },
/* 19 */
/***/ function(module, exports) {
module.exports = "module.exports = \"<h2 id=\\\"模板切换\\\">模板切换</h2>\\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 `<h1>{{title}}</h1>\\r\\n <ul>\\r\\n {{each list as value i}}\\r\\n <li>索引 {{i + 1}} ：{{value}}</li>\\r\\n {{/each}}\\r\\n </ul>`;\\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 = \"<h2 id=\\\"模板切换\\\">模板切换</h2>\\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 `<h1>{{title}}</h1>\\r\\n <ul>\\r\\n {{each list as value i}}\\r\\n <li>索引 {{i + 1}} ：{{value}}</li>\\r\\n {{/each}}\\r\\n </ul>`;\\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 = \"<h2 id=\\\"Hello World\\\">Hello World</h2>\\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 <div>\\r\\n <h1 onclick=\\\"handleClick(this)\\\">Hello ,{{name}}!</h1>\\r\\n </div>\\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<script src=\\\"omi.js\\\"></script>\\r\\n```\\r\\n\\r\\n\\r\\n\""
module.exports = "module.exports = \"<h2 id=\\\"Hello World\\\">Hello World</h2>\\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 <div>\\r\\n <h1 onclick=\\\"handleClick(this)\\\">Hello ,{{name}}!</h1>\\r\\n </div>\\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<script src=\\\"omi.js\\\"></script>\\r\\n```\""
/***/ },
/* 22 */
/***/ function(module, exports) {
module.exports = "module.exports = \"<h2 id=\\\"Installation\\\">Installation</h2>\\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 = \"<h2 id=\\\"Installation\\\">Installation</h2>\\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 */