update store tutorial

This commit is contained in:
dntzhang 2017-05-08 17:31:52 +08:00
parent 91897b2f45
commit bd8557782b
6 changed files with 985 additions and 756 deletions

View File

@ -2,15 +2,14 @@ import Omi from '../../src/index.js';
import Pagination from './pagination.js';
import Content from './content.js';
Omi.makeHTML('Pagination', Pagination);
Omi.makeHTML('Content', Content);
Omi.tag('pagination', Pagination);
Omi.tag('content', Content);
class Main extends Omi.Component {
constructor(data) {
super(data);
}
handlePageChange(index){
this.content.goto(index+1)
this.update()
@ -19,14 +18,14 @@ class Main extends Omi.Component {
render () {
return `<div>
<h1>Pagination Example</h1>
<Content name="content" />
<Pagination
<content name="content" ></content>
<pagination
name="pagination"
:data-total="100"
:data-page-size="10"
:data-num-edge="1"
:data-num-display="4"     
onPageChange="handlePageChange" />
:data-num-display="4"
onpagechange="handlePageChange" ></pagination>
</div>`;
}
}

View File

@ -14,7 +14,7 @@ class Pagination extends Omi.Component {
ellipseText: "...",
prevShow: true,
nextShow: true,
onPageChange: function () { return false; }
onpagechange: function () { return false; }
}, data);
super(data);
}
@ -26,8 +26,7 @@ class Pagination extends Omi.Component {
goto (index,evt) {
evt.preventDefault();
this.data.currentPage=index;
this.update();
this.data.onPageChange(index);
this.data.onpagechange(index);
}
style(){

View File

@ -28,7 +28,7 @@ class Main extends Omi.Component {
render () {
return `<div>
<h1>Pagination Example</h1>
<Content name="content" />
<content name="content"></content>
<pagination
name="pagination"
:data-total="100"
@ -351,6 +351,4 @@ Omi Store体系以前通过addView进行视图收集store进行update的时
* Omi相关的使用教程和blog可以访问 [Omi Tutorial](https://github.com/AlloyTeam/omi/tree/master/tutorial)
* 如果你懒得搭建项目脚手架,可以试试 [omi-cli](https://github.com/AlloyTeam/omi/tree/master/cli)
* 如果你有Omi相关的问题可以 [New issue](https://github.com/AlloyTeam/omi/issues/new)
* 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)
![](http://images2015.cnblogs.com/blog/105416/201702/105416-20170208095745213-1049686133.png)
* 如果想更加方便的交流关于Omi的一切可以加入QQ的Omi交流群(256426170)