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

clean up

This commit is contained in:
kmdjs 2017-01-22 17:50:49 +08:00
parent 25ccef69f6
commit aaa8e93e65
4 changed files with 7 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/cn_events.md
View File

@ -104,3 +104,7 @@ class Pagination extends Omi.Component {
这里取了Pagination组件的部分代码。高亮的就是执行onPageChange的地方。
### 相关地址
* [演示地址](http://alloyteam.github.io/omi/example/pagination/)
* [源码地址](https://github.com/AlloyTeam/omi/tree/master/example/pagination)

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)

26
example/pagination/npm-debug.log
View File

@ -1,26 +0,0 @@
0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'mobx' ]
2 info using npm@2.14.20
3 info using node@v4.4.0
4 verbose stack Error: missing script: mobx
4 verbose stack at run (C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:142:19)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\lib\run-script.js:58:5
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:345:5
4 verbose stack at checkBinReferences_ (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:309:45)
4 verbose stack at final (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:343:3)
4 verbose stack at then (C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:113:5)
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\read-package-json\read-json.js:300:12
4 verbose stack at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\graceful-fs.js:78:16
4 verbose stack at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)
5 verbose cwd C:\Users\dntzhang\an\example\pagination
6 error Windows_NT 10.0.10586
7 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "mobx"
8 error node v4.4.0
9 error npm v2.14.20
10 error missing script: mobx
11 error If you need help, you may report this error at:
11 error <https://github.com/npm/npm/issues>
12 verbose exit [ 1, true ]

4
website/dist/bundler.js vendored
View File

@ -1857,7 +1857,7 @@
/* 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\""
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\""
/***/ },
/* 15 */
@ -1881,7 +1881,7 @@
/* 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)\\r\\n\""
/***/ },
/* 19 */