@ -74,14 +74,18 @@
var _content2 = _interopRequireDefault ( _content ) ;
var _sidebar = _ _webpack _require _ _ ( 2 6 ) ;
var _sidebar = _ _webpack _require _ _ ( 2 9 ) ;
var _sidebar2 = _interopRequireDefault ( _sidebar ) ;
var _head = _ _webpack _require _ _ ( 28 ) ;
var _head = _ _webpack _require _ _ ( 31 ) ;
var _head2 = _interopRequireDefault ( _head ) ;
var _config = _ _webpack _require _ _ ( 10 ) ;
var _config2 = _interopRequireDefault ( _config ) ;
function _interopRequireDefault ( obj ) { return obj && obj . _ _esModule ? obj : { default : obj } ; }
function _classCallCheck ( instance , Constructor ) { if ( ! ( instance instanceof Constructor ) ) { throw new TypeError ( "Cannot call a class as a function" ) ; } }
@ -147,18 +151,17 @@
// so textContent
var html = Prism . highlight ( codes [ i ] . textContent , Prism . languages . javascript ) ;
codes [ i ] . innerHTML = html ;
codes [ i ] . classList . add ( 'language-js' ) ;
}
//1,5-6,8
var mapping = { 3 : '6' , 6 : '5' , 9 : '3,9,34' , 19 : '22' , 22 : '6-12' } ;
var pres = document . querySelectorAll ( "pre" ) ;
for ( var key in mapping ) {
pres [ key ] . setAttribute ( "data-line" , mapping [ key ] ) ;
var highlight = _config2 . default . highlight ;
for ( var key in _config2 . default . highlight ) {
pres [ key ] . setAttribute ( "data-line" , highlight [ key ] ) ;
}
this . _$$ ( 'pre' ) . forEach ( function ( item ) {
item . classList . add ( 'language-js' ) ;
} ) ;
@ -1037,13 +1040,13 @@
this . renderTo = typeof data === "string" ? document . querySelector ( data ) : data ;
this . _hidden = this . renderTo . querySelector ( '.omi_scoped__hidden_data' ) ;
this . id = this . _hidden . dataset . omiId ;
this . data = JSON . parse ( this . _hidden . value ) ;
this . data = this . _data = JSON . parse ( this . _hidden . value ) ;
} else {
this . data = data || { } ;
this . data = this . _data = data || { } ;
this . _omi _server _rendering = server ;
this . id = _omi2 . default . getInstanceId ( ) ;
this . refs = { } ;
this . id = this . _omi _server _rendering ? 1000000 + _omi2 . default . getInstanceId ( ) : _omi2 . default . getInstanceId ( ) ;
}
this . refs = { } ;
this . children = [ ] ;
this . childrenData = [ ] ;
this . HTML = null ;
@ -1351,7 +1354,7 @@
key : '_mergeData' ,
value : function _mergeData ( childStr , isFirst ) {
var arr = childStr . match ( /\s*data=['|"](\S*)['|"]/ ) ;
this . data = Object . assign ( { } , this . _getDataset ( childStr ) , arr ? this . parent [ RegExp . $1 ] : null , this . ) ;
this . data = Object . assign ( { } , this . _getDataset ( childStr ) , arr ? this . parent [ RegExp . $1 ] : null , this . _ data) ;
isFirst && this . install ( ) ;
}
} , {
@ -1754,7 +1757,7 @@
/* 9 */
/***/ function ( module , exports , _ _webpack _require _ _ ) {
"use strict" ;
'use strict' ;
Object . defineProperty ( exports , "__esModule" , {
value : true
@ -1766,6 +1769,10 @@
var _index2 = _interopRequireDefault ( _index ) ;
var _config = _ _webpack _require _ _ ( 10 ) ;
var _config2 = _interopRequireDefault ( _config ) ;
function _interopRequireDefault ( obj ) { return obj && obj . _ _esModule ? obj : { default : obj } ; }
function _classCallCheck ( instance , Constructor ) { if ( ! ( instance instanceof Constructor ) ) { throw new TypeError ( "Cannot call a class as a function" ) ; } }
@ -1775,7 +1782,7 @@
function _inherits ( subClass , superClass ) { if ( typeof superClass !== "function" && superClass !== null ) { throw new TypeError ( "Super expression must either be null or a function, not " + typeof superClass ) ; } subClass . prototype = Object . create ( superClass && superClass . prototype , { constructor : { value : subClass , enumerable : false , writable : true , configurable : true } } ) ; if ( superClass ) Object . setPrototypeOf ? Object . setPrototypeOf ( subClass , superClass ) : subClass . _ _proto _ _ = superClass ; }
function getMarkDown ( name , lan ) {
var md = _ _webpack _require _ _ ( 1 0 ) ( "./" + lan + "_" + name + ".md" ) ;
var md = _ _webpack _require _ _ ( 1 1 ) ( "./" + lan + "_" + name + ".md" ) ;
return md . substring ( 0 , md . length - 1 ) . replace ( /\\r\\n/g , "\r\n" ) . replace ( /\\n/g , "\n" ) . replace ( /\\t/g , "\t" ) . replace ( 'module.exports = "' , "" ) . replace ( /\\"/g , '"' ) . replace ( /\\\\/g , '\\' ) ;
}
@ -1798,19 +1805,19 @@
}
_createClass ( Content , [ {
key : "install" ,
key : 'install' ,
value : function install ( ) {
this . data . html = marked ( getMarkDownByArr ( [ 'installation' , 'hello_world' , 'components' , 'communication' , 'lifecycle' , 'events' , 'condition' , 'loop' , 'form' , 'inherit' , 'template' , 'thinking_in_omi' ] , 'cn' ) ) ;
this . data . html = marked ( getMarkDownByArr ( _config2 . default . mds , 'cn' ) ) ;
}
} , {
key : "style" ,
key : 'style' ,
value : function style ( ) {
return " " ;
return ' ' ;
}
} , {
key : "render" ,
key : 'render' ,
value : function render ( ) {
return "\n <div class=\"content\">\n {{{html}}}\n </div>\n " ;
return '\n <div class="content">\n {{{html}}}\n </div>\n ' ;
}
} ] ) ;
@ -1821,24 +1828,50 @@
/***/ } ,
/* 10 */
/***/ function ( module , exports ) {
'use strict' ;
Object . defineProperty ( exports , "__esModule" , {
value : true
} ) ;
var config = {
//1,5-6,8
highlight : { 3 : '6' , 6 : '5' , 9 : '3,9,34' , 19 : '22' , 22 : '6-12' , 33 : '13,18' } ,
mds : [ 'installation' , 'hello_world' , 'components' , 'communication' , 'lifecycle' , 'events' , 'condition' , 'loop' , 'form' , 'inherit' , 'template' , 'get_dom' , 'thinking_in_omi' ] ,
cn _menus : [ { title : "快速开始" , list : [ { "name" : "安装" } , { "name" : "Hello World" } , { "name" : "组件" } , { "name" : "组件通讯" } , { "name" : "生命周期" } , { "name" : "事件处理" } , { "name" : "条件判断" } , { "name" : "循环遍历" } , { "name" : "表单" } , { "name" : "继承" } ,
//{"name": "容器系统"},
{ "name" : "模板切换" } , { "name" : "获取DOM节点" } ,
//{"name": "服务器端渲染"},
{ "name" : "Omi的理念" } ] } , { title : "Omi原理" , list : [ { "name" : "未完待续" } , { "name" : "..." } , { "name" : "..." } , { "name" : "..." } ] } ] ,
en _menu : [ { title : "QUICK START" , list : [ { "name" : "Installation" } , { "name" : "Hello World" } , { "name" : "Components" } , { "name" : "Lifecycle" } , { "name" : "Handling Events" } , { "name" : "Conditional Rendering" } , { "name" : "Lists and Keys" } , { "name" : "Forms" } , { "name" : "Inheritance" } , { "name" : "Sever-side Rendering" } , { "name" : "Thinking In Omi" } ] } , { title : "Principle of Omi" , list : [ { "name" : "Scoped CSS" } ] } ]
} ;
exports . default = config ;
/***/ } ,
/* 11 */
/***/ function ( module , exports , _ _webpack _require _ _ ) {
var map = {
"./README.md" : 11 ,
"./cn_communication.md" : 12 ,
"./cn_components.md" : 13 ,
"./cn_condition.md" : 14 ,
"./cn_events.md" : 15 ,
"./cn_form.md" : 16 ,
"./cn_hello_world.md" : 17 ,
"./cn_inherit.md" : 18 ,
"./cn_installation.md" : 19 ,
"./cn_lifecycle.md" : 20 ,
"./cn_loop.md" : 21 ,
"./cn_template.md" : 22 ,
"./cn_thinking_in_omi.md" : 23 ,
"./en_hello_world.md" : 24 ,
"./en_installation.md" : 25
"./README.md" : 12 ,
"./cn_communication.md" : 13 ,
"./cn_components.md" : 14 ,
"./cn_condition.md" : 15 ,
"./cn_events.md" : 16 ,
"./cn_form.md" : 17 ,
"./cn_get_dom.md" : 18 ,
"./cn_hello_world.md" : 19 ,
"./cn_inherit.md" : 20 ,
"./cn_installation.md" : 21 ,
"./cn_lifecycle.md" : 22 ,
"./cn_loop.md" : 23 ,
"./cn_pr_env.md" : 24 ,
"./cn_template.md" : 25 ,
"./cn_thinking_in_omi.md" : 26 ,
"./en_hello_world.md" : 27 ,
"./en_installation.md" : 28
} ;
function webpackContext ( req ) {
return _ _webpack _require _ _ ( webpackContextResolve ( req ) ) ;
@ -1851,101 +1884,113 @@
} ;
webpackContext . resolve = webpackContextResolve ;
module . exports = webpackContext ;
webpackContext . id = 1 0 ;
webpackContext . id = 1 1 ;
/***/ } ,
/* 11 */
/***/ function ( module , exports ) {
module . exports = "module.exports = \"# Omi使用文档\\r\\n* [安装](./cn_installation.md)\\r\\n* [Hello World](./cn_hello_world.md)\\r\\n* [组件](./cn_components.md)\\r\\n* [组件通讯](./cn_communication.md)\\r\\n* [生命周期](./cn_lifecycle.md)\\r\\n* [事件处理](./cn_events.md)\\r\\n* [条件判断](./cn_condition.md)\\r\\n* [循环遍历](./cn_loop.md)\\r\\n* [表单](./cn_form.md)\\r\\n* [继承](./cn_inhrit.md)\\r\\n* [模板切换](./cn_template.md)\\r\\n* [Omi理念](./cn_thinking_in_omi.md)\\r\\n\\r\\n# 从零一步步打造Web组件化框架Omi\\r\\n\\r\\n（ ）
/***/ } ,
/* 12 */
/***/ function ( module , exports ) {
module . exports = "module.exports = \" <h2 id=\\\"组件通讯\\\">组件通讯</h2>\\r\\n\\r\\n使用Omi， ， ： ， ， ： \""
module . exports = "module.exports = \"# Omi使用文档\\r\\n* [安装](./cn_installation.md)\\r\\n* [Hello World](./cn_hello_world.md)\\r\\n* [组件](./cn_components.md)\\r\\n* [组件通讯](./cn_communication.md)\\r\\n* [生命周期](./cn_lifecycle.md)\\r\\n* [事件处理](./cn_events.md)\\r\\n* [条件判断](./cn_condition.md)\\r\\n* [循环遍历](./cn_loop.md)\\r\\n* [表单](./cn_form.md)\\r\\n* [继承](./cn_inhrit.md)\\r\\n* [模板切换](./cn_template.md)\\r\\n* [Omi理念](./cn_thinking_in_omi.md)\\r\\n\\r\\n# 从零一步步打造Web组件化框架Omi\\r\\n\\r\\n（ ）
/***/ } ,
/* 13 */
/***/ function ( module , exports ) {
module . exports = "module.exports = \"<h2 id=\\\"组件 \\\">组件</h2>\\r\\n\\r\\n我们希望开发者可以像搭积木一样制作Web程序， ， ； ， ， ， ， ， ？ ， ： ？ ， ， ， ， \""
module . exports = "module.exports = \"<h2 id=\\\"组件 通讯\\\">组件通讯</h2>\\r\\n\\r\\n使用Omi， ， ： ， ， ： \""
/***/ } ,
/* 14 */
/***/ function ( module , exports ) {
module . exports = "module.exports = \"<h2 id=\\\" 条件判断\\\">条件判断</h2>\\r\\n\\r\\n我们经常需要根据不同的状态呈现不同的界面， ， st 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就是提供了很好的可编程性， ， ， \""
module . exports = "module.exports = \"<h2 id=\\\" 组件\\\">组件</h2>\\r\\n\\r\\n我们希望开发者可以像搭积木一样制作Web程序， ， ； ， ， ， ， ， ？ ， ： st 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？ ， ， ， ， \""
/***/ } ,
/* 15 */
/***/ function ( module , exports ) {
module . exports = "module.exports = \"<h2 id=\\\" 事件处理\\\">事件处理</h2>\\r\\n\\r\\nOmi的事件分内置事件和自定义事件。在内置事件处理方面巧妙地利用了浏览器自身的管线机制， ？ ？ ： Test 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开发者自己定义的组件的事件， ： 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\\\" ， ： \""
module . exports = "module.exports = \"<h2 id=\\\" 条件判断\\\">条件判断</h2>\\r\\n\\r\\n我们经常需要根据不同的状态呈现不同的界面， Test 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， 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就是提供了很好的可编程性， ， ， \""
/***/ } ,
/* 16 */
/***/ function ( module , exports ) {
module . exports = "module.exports = \"<h2 id=\\\" 表单\\\">表单</h2>\\r\\n\\r\\nOmi让一些表单操控起来更加方便， ！ ， ： ， ， ， ： ： ？ )\""
module . exports = "module.exports = \"<h2 id=\\\" 事件处理\\\">事件处理</h2>\\r\\n\\r\\nOmi的事件分内置事件和自定义事件。在内置事件处理方面巧妙地利用了浏览器自身的管线机制， ？ ？ ： ， ： ， ： )\""
/***/ } ,
/* 17 */
/***/ 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/) 打包工具， ， ， ， ， ， ， ： ： ， ， ， ： \\r\\n```\\r\\n\\r\\n[[点击这里->在线试试]](http://alloyteam.github.io/omi/website/redirect.html?type=hello_es5 )\""
module . exports = "module.exports = \"<h2 id=\\\" 表单\\\">表单</h2>\\r\\n\\r\\nOmi让一些表单操控起来更加方便， ！ ， ： ， ， ， ： ： ？ \\r\\n```\\r\\n\\r\\n[[点击这里->在线试试]](http://alloyteam.github.io/omi/website/redirect.html?type=form )\""
/***/ } ,
/* 18 */
/***/ function ( module , exports ) {
module . exports = "module.exports = \"<h2 id=\\\" 继承\\\">继承</h2>\\r\\n\\r\\n通过继承机制， ， ， ， \\r\\n\\r\\n```js\\r\\nclass Hello extends Omi.Component {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n style () {\\r\\n return `\\r\\n div {\\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 ' <div onclick=\\\"handleClick(this,event)\\\">Hello {{name}}!</div>'\\r\\n }\\r\\n}\\r\\n\\r\\nclass SubHello extends Hello {\\r\\n constructor(data) {\\r\\n super(data);\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render(new SubHello({ name : 'Omi' }),'#container');\\r\\n```\\r\\n\\r\\n[[点击这里->在线试试]](http://alloyteam.github.io/omi/website/redirect.html?type=inherit)\\r\\n\\r\\n### ES5下的继承\\r\\n\\r\\n```js\\r\\nvar Hello = Omi.create(\\\"Hello\\\",{\\r\\n render:function(){\\r\\n return ' <div>Hello {{name}}!</div>'\\r\\n }\\r\\n})\\r\\n\\r\\nvar SubHello = Omi.create(\\\"SubHello\\\",Hello,{ });\\r\\n\\r\\n\\r\\nOmi.render(new SubHello({ name : 'Omi' }),'#container');\\r\\n``` \\r\\n\\r\\n[[点击这里->在线试试]](http://alloyteam.github.io/omi/website/redirect.html?type=inherit_es5 )\""
module . exports = "module.exports = \"<h2 id=\\\" 获取DOM节点\\\">获取DOM节点</h2>\\r\\n\\r\\n虽然绝大部分情况下， ， ， \\r\\n\\r\\n```js\\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(){\\r\\n alert(this.refs.abc.innerHTML);\\r\\n }\\r\\n render() {\\r\\n return `\\r\\n <div>\\r\\n <h1 ref=\\\"abc\\\" onclick=\\\"handleClick()\\\">Hello ,{{name}}!</h1>\\r\\n </div>\\r\\n `;\\r\\n\\r\\n }\\r\\n}\\r\\n\\r\\nOmi.render(new Hello({ name : \\\"Omi\\\" }),\\\"#container\\\");\\r\\n```\\r\\n\\r\\n可以看到通过在HTML中标记ref为abc， \\r\\n\\r\\n[[点击这里->在线试试]](http://alloyteam.github.io/omi/website/redirect.html?type=ref )\""
/***/ } ,
/* 19 */
/***/ function ( module , exports ) {
module . exports = "module.exports = \"<h2 id=\\\" 安装\\\">安装</h2>\\n\\nOmi是一款用于创建用户界面的组件化框架， ， ： ， \""
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/) 打包工具， ， ， ， ， ， ， ： ： ， ， ， ： \""
/***/ } ,
/* 20 */
/***/ 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 | 初始化安装， ， ： ， ， \\r\\n```\\r\\n\\r\\n[[点击这里->在线试试]](http://alloyteam.github.io/omi/website/redirect.html?type=lifecycle )\""
module . exports = "module.exports = \"<h2 id=\\\" 继承\\\">继承</h2>\\r\\n\\r\\n通过继承机制， ， ， ， \\r\\n```\\r\\n\\r\\n[[点击这里->在线试试]](http://alloyteam.github.io/omi/website/redirect.html?type=inherit_es5 )\""
/***/ } ,
/* 21 */
/***/ 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的每一项是字符串， \""
module . exports = "module.exports = \"<h2 id=\\\" 安装\\\">安装</h2>\\n\\nOmi是一款用于创建用户界面的组件化框架， ， ： ， \""
/***/ } ,
/* 22 */
/***/ 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， ？ ， ， ， ， ： 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}} ： e)\""
module . exports = "module.exports = \"<h2 id=\\\" 生命周期\\\">生命周期</h2>\\r\\n\\r\\n\\r\\n| 名称 | 含义 | 时机 |\\r\\n| :-------------: |:-------------:|: -----:|\\r\\n| constructor | 构造函数 | new的时候 |\\r\\n| install | 初始化安装， ， ： ， ， 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[[点击这里->在线试试]](http://alloyteam.github.io/omi/website/redirect.html?type=lifecycl e)\""
/***/ } ,
/* 23 */
/***/ function ( module , exports ) {
module . exports = "module.exports = \"<h2 id=\\\" Omi的理念\\\">Omi的理念</h2>\\r\\n\\r\\nOmi的理念是基于面向对象编程体系， ， ， ， ， ， ， ， ： ？ ？ ？ ， ， ， ， ， ， ， ？ （ ） ： ， ， ， ， ； ， × × × ， \""
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的每一项是字符串， \""
/***/ } ,
/* 24 */
/***/ 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``` \""
module . exports = "module.exports = \"<h2 id=\\\" 环境搭建\\\">环境搭建</h2>\\r\\n\\r\\n我们使用 Webpack + ES6 的方式去开发Omi框架； ， ， ， ， ： ， ， \""
/***/ } ,
/* 25 */
/***/ 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``` \""
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， ？ ， ， ， ， ： ： \""
/***/ } ,
/* 26 */
/***/ function ( module , exports ) {
module . exports = "module.exports = \"<h2 id=\\\"Omi的理念\\\">Omi的理念</h2>\\r\\n\\r\\nOmi的理念是基于面向对象编程体系， ， ， ， ， ， ， ， ： ？ ？ ？ ， ， ， ， ， ， ， ？ （ ） ： ， ， ， ， ； ， × × × ，
/***/ } ,
/* 27 */
/***/ 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```\""
/***/ } ,
/* 28 */
/***/ 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```\""
/***/ } ,
/* 29 */
/***/ function ( module , exports , _ _webpack _require _ _ ) {
'use strict' ;
@ -1960,10 +2005,14 @@
var _index2 = _interopRequireDefault ( _index ) ;
var _list = _ _webpack _require _ _ ( 27 ) ;
var _list = _ _webpack _require _ _ ( 30 ) ;
var _list2 = _interopRequireDefault ( _list ) ;
var _config = _ _webpack _require _ _ ( 10 ) ;
var _config2 = _interopRequireDefault ( _config ) ;
function _interopRequireDefault ( obj ) { return obj && obj . _ _esModule ? obj : { default : obj } ; }
function _classCallCheck ( instance , Constructor ) { if ( ! ( instance instanceof Constructor ) ) { throw new TypeError ( "Cannot call a class as a function" ) ; } }
@ -1986,16 +2035,7 @@
_createClass ( Sidebar , [ {
key : 'install' ,
value : function install ( ) {
if ( this . data . lan === "cn" ) {
this . data . items = [ { title : "快速开始" , list : [ { "name" : "安装" } , { "name" : "Hello World" } , { "name" : "组件" } , { "name" : "组件通讯" } , { "name" : "生命周期" } , { "name" : "事件处理" } , { "name" : "条件判断" } , { "name" : "循环遍历" } , { "name" : "表单" } , { "name" : "继承" } ,
//{"name": "容器系统"},
{ "name" : "模板切换" } ,
//{"name": "服务器端渲染"},
{ "name" : "Omi的理念" } ] } , { title : "Omi原理" , list : [ { "name" : "未完待续" } , { "name" : "..." } , { "name" : "..." } , { "name" : "..." } ] } ] ;
} else {
this . data . items = [ { title : "QUICK START" , list : [ { "name" : "Installation" } , { "name" : "Hello World" } , { "name" : "Components" } , { "name" : "Lifecycle" } , { "name" : "Handling Events" } , { "name" : "Conditional Rendering" } , { "name" : "Lists and Keys" } , { "name" : "Forms" } , { "name" : "Inheritance" } , { "name" : "Sever-side Rendering" } , { "name" : "Thinking In Omi" } ] } , { title : "Omi's Principle" , list : [ { "name" : "Scroped CSS" } ] } ] ;
}
this . data . items = _config2 . default [ this . data . lan + '_menus' ] ;
this . data . height = window . innerHeight - 45 ;
this . childrenData = this . data . items ;
}
@ -2017,7 +2057,7 @@
exports . default = Sidebar ;
/***/ } ,
/* 27 */
/* 30 */
/***/ function ( module , exports , _ _webpack _require _ _ ) {
'use strict' ;
@ -2067,7 +2107,7 @@
exports . default = List ;
/***/ } ,
/* 28 */
/* 31 */
/***/ function ( module , exports , _ _webpack _require _ _ ) {
'use strict' ;
kmdjs