update docs
This commit is contained in:
kmdjs
parent
4ac607863f
commit
9fd3343c36
|
|
@ -86,6 +86,7 @@ class Todo extends Omi.Component {
|
|||
constructor(data) {
|
||||
super(data);
|
||||
this.data.length = this.data.items.length;
|
||||
this.listData = { items : this.data.items };
|
||||
}
|
||||
|
||||
add (evt) {
|
||||
|
|
@ -110,7 +111,7 @@ class Todo extends Omi.Component {
|
|||
render () {
|
||||
return `<div>
|
||||
<h3>TODO</h3>
|
||||
<List name="list" data="data" />
|
||||
<List name="list" data="listData" />
|
||||
<form onsubmit="add(event)" >
|
||||
<input type="text" onchange="handleChange(this)" value="{{text}}" />
|
||||
<button>Add #{{length}}</button>
|
||||
|
|
@ -121,10 +122,11 @@ class Todo extends Omi.Component {
|
|||
```
|
||||
|
||||
* 第3行，通过makeHTML方法把组件制作成可以在render中使用的标签。当然Omi.makeHTML('List', List);也可以写在List组件的代码下面。
|
||||
* 第33行，在render方法中使用List组件。其中name方法可以让你在代码里通过this快速方法到该组件的实例。data="data"可以让你把this.data传递给子组件。
|
||||
* 第34行，在父组件上定义listData属性用来传递给子组件。
|
||||
* 第34行，在render方法中使用List组件。其中name方法可以让你在代码里通过this快速方法到该组件的实例。data="listData"可以让你把this.listData传递给子组件。
|
||||
|
||||
需要注意的是，父组件的this.data会被通过Object.assign浅拷贝到子组件。
|
||||
这样做的目的主要是希望以后DOM的变更都尽量修改子组件自身的data，然后再调用其update方法，而不是去更改父组件的data。
|
||||
需要注意的是，父组件的this.listData会被通过Object.assign浅拷贝到子组件。
|
||||
这样做的目的主要是希望以后DOM的变更都尽量修改子组件自身的data，然后再调用其update方法，而不是去更改父组件的listData。
|
||||
|
||||
关于Omi组件通讯其实有4种方案，这个后续教程会专门来讲。
|
||||
|
||||
|
|
|
|||
|
|
@ -88,6 +88,7 @@ class Todo extends Omi.Component {
|
|||
constructor(data) {
|
||||
super(data);
|
||||
this.data.length = this.data.items.length;
|
||||
this.listData = { items : this.data.items };
|
||||
}
|
||||
|
||||
add (evt) {
|
||||
|
|
@ -112,7 +113,7 @@ class Todo extends Omi.Component {
|
|||
render () {
|
||||
return `<div>
|
||||
<h3>TODO</h3>
|
||||
<List name="list" data="data" />
|
||||
<List name="list" data="listData" />
|
||||
<form onsubmit="add(event)" >
|
||||
<input type="text" onchange="handleChange(this)" value="{{text}}" />
|
||||
<button>Add #{{length}}</button>
|
||||
|
|
@ -123,9 +124,10 @@ class Todo extends Omi.Component {
|
|||
```
|
||||
|
||||
- In line 3, we use `makeHTML` to make the component to a tag which can be used in render method. Of course, `Omi.makeHTML('List', List);` can also be written in the end of List component.
|
||||
- In line 33, we use List component in the render method. `name` attribute allows us easily find the instance of the component by using `this`. .
|
||||
- In line 9, the parent component defines the 'listData' property
|
||||
- In line 34, we use List component in the render method. `name` attribute allows us easily find the instance of the component by using `this`.`data="listData"` attribute allows us easily pass `this.listData` to the sub component from parent component.
|
||||
|
||||
It should be noted that the `data` passed from `data="data"` is cloned to the subcomponents by Object.assign(shallow copy) , which means if we want to change the DOM, we recommend that first update the `data` of the instance of subcomponent(not the parent component's data ) and secondly call the `update` method.
|
||||
It should be noted that the `data` passed from `data="listData"` is cloned to the subcomponents by Object.assign(shallow copy) , which means if we want to change the DOM, we recommend that first update the `data` of the instance of subcomponent(not the parent component's `listData` ) and secondly call the `update` method.
|
||||
|
||||
In fact there are 4 way to communicate between components, it'll be explained later.
|
||||
|
||||
|
|
|
|||
|
|
@ -93,6 +93,7 @@
|
|||
var _this = _possibleConstructorReturn(this, (Todo.__proto__ || Object.getPrototypeOf(Todo)).call(this, data));
|
||||
|
||||
_this.data.length = _this.data.items.length;
|
||||
_this.listData = { items: _this.data.items };
|
||||
return _this;
|
||||
}
|
||||
|
||||
|
|
@ -118,7 +119,7 @@
|
|||
}, {
|
||||
key: 'render',
|
||||
value: function render() {
|
||||
return '<div>\n <h3>TODO</h3>\n <List name="list" data="data" />\n <form onsubmit="add(event)" >\n <input type="text" onchange="handleChange(this)" value="{{text}}" />\n <button>Add #{{length}}</button>\n </form>\n </div>';
|
||||
return '<div>\n <h3>TODO</h3>\n <List name="list" data="listData" />\n <form onsubmit="add(event)" >\n <input type="text" onchange="handleChange(this)" value="{{text}}" />\n <button>Add #{{length}}</button>\n </form>\n </div>';
|
||||
}
|
||||
}]);
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ class Todo extends Omi.Component {
|
|||
constructor(data) {
|
||||
super(data);
|
||||
this.data.length = this.data.items.length;
|
||||
this.listData = { items : this.data.items };
|
||||
}
|
||||
|
||||
add (evt) {
|
||||
|
|
@ -31,7 +32,7 @@ class Todo extends Omi.Component {
|
|||
render () {
|
||||
return `<div>
|
||||
<h3>TODO</h3>
|
||||
<List name="list" data="data" />
|
||||
<List name="list" data="listData" />
|
||||
<form onsubmit="add(event)" >
|
||||
<input type="text" onchange="handleChange(this)" value="{{text}}" />
|
||||
<button>Add #{{length}}</button>
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -20,7 +20,7 @@
|
|||
}else if(type==='todo'){
|
||||
goto('http://alloyteam.github.io/omi/example/playground/index.html?code=class%20Todo%20extends%20Omi.Component%20%7B%0A%20%20%20%20constructor(data)%20%7B%0A%20%20%20%20%20%20%20%20super(data)%3B%0A%20%20%20%20%7D%0A%20%20%20%20add%20(evt)%20%7B%0A%20%20%20%20%20%20%20%20evt.preventDefault()%3B%0A%20%20%20%20%20%20%20%20this.data.items.push(this.data.text)%3B%0A%20%20%20%20%20%20%20%20this.data.text%20%3D%20%27%27%3B%0A%20%20%20%20%20%20%20%20this.update()%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20style%20()%20%7B%0A%20%20%20%20%20%20%20%20return%20%60%0A%20%20%20%20%20%20%20%20h3%20%7B%20color%3Ared%3B%20%7D%0A%20%20%20%20%20%20%20%20button%7B%20color%3Agreen%3B%7D%0A%20%20%20%20%20%20%20%20%60%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20handleChange(target)%7B%0A%20%20%20%20%20%20%20%20this.data.text%20%3D%20target.value%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20render%20()%20%7B%0A%20%20%20%20%20%20%20%20return%20%60%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Ch3%3ETODO%3C%2Fh3%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cul%3E%20%7B%7B%23items%7D%7D%20%3Cli%3E%7B%7B.%7D%7D%3C%2Fli%3E%20%7B%7B%2Fitems%7D%7D%3C%2Ful%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cform%20onsubmit%3D%22add(event)%22%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22text%22%20onchange%3D%22handleChange(this)%22%20%20value%3D%22%7B%7Btext%7D%7D%22%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%3EAdd%20%23%7B%7Bitems.length%7D%7D%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fform%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%60%3B%0A%20%20%20%20%7D%0A%7D%0A%0A%0AOmi.render(new%20Todo(%7B%20items%3A%20%5B%27Omi%27%2C%27dntzhang%27%2C%27AlloyTeam%27%5D%20%2C%20text%20%3A%20%27%27%20%7D)%2C%27%23container%27)%3B');
|
||||
}else if(type==='todo_nest'){
|
||||
goto('http://alloyteam.github.io/omi/example/playground/index.html?code=class%20List%20extends%20Omi.Component%20%7B%0A%20%20%20%20constructor(data)%20%7B%0A%20%20%20%20%20%20%20%20super(data)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20render%20()%20%7B%0A%20%20%20%20%20%20%20%20return%20%60%3Cul%3E%20%7B%7B%23items%7D%7D%20%3Cli%3E%7B%7B.%7D%7D%3C%2Fli%3E%20%7B%7B%2Fitems%7D%7D%3C%2Ful%3E%60%3B%0A%20%20%20%20%7D%0A%7D%0A%0AOmi.makeHTML(%27List%27%2C%20List)%3B%0A%0Aclass%20Todo%20extends%20Omi.Component%20%7B%0A%20%20%20%20constructor(data)%20%7B%0A%20%20%20%20%20%20%20%20super(data)%3B%0A%20%20%20%20%20%20%20%20this.data.length%20%3D%20this.data.items.length%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20add%20(evt)%20%7B%0A%20%20%20%20%20%20%20%20evt.preventDefault()%3B%0A%20%20%20%20%20%20%20%20this.list.data.items.push(this.data.text)%3B%0A%20%20%20%20%20%20%20%20this.data.length%20%3D%20this.list.data.items.length%3B%0A%20%20%20%20%20%20%20%20this.data.text%20%3D%20%27%27%3B%0A%20%20%20%20%20%20%20%20this.update()%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20style%20()%20%7B%0A%20%20%20%20%20%20%20%20return%20%60%0A%20%20%20%20%20%20%20%20h3%20%7B%20color%3Ared%3B%20%7D%0A%20%20%20%20%20%20%20%20button%7B%20color%3Agreen%3B%7D%60%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20handleChange(target)%7B%0A%20%20%20%20%20%20%20%20this.data.text%20%3D%20target.value%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20render%20()%20%7B%0A%20%20%20%20%20%20%20%20return%20%60%0A%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ch3%3ETODO%3C%2Fh3%3E%0A%20%20%20%20%20%20%20%20%20%20%3CList%20name%3D%22list%22%20data%3D%22data%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cform%20onsubmit%3D%22add(event)%22%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22text%22%20onchange%3D%22handleChange(this)%22%20%20value%3D%22%7B%7Btext%7D%7D%22%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%3EAdd%20%23%7B%7Blength%7D%7D%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fform%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%60%3B%0A%20%20%20%20%7D%0A%7D%0A%0AOmi.render(new%20Todo(%7B%20items%3A%20%5B%27Omi%27%2C%27dntzhang%27%2C%27AlloyTeam%27%5D%20%2C%20text%20%3A%20%27%27%20%7D)%2C%27%23container%27)%3B');
|
||||
goto('http://alloyteam.github.io/omi/example/playground/index.html?code=class%20List%20extends%20Omi.Component%20%7B%0A%20%20%20%20constructor(data)%20%7B%0A%20%20%20%20%20%20%20%20super(data)%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20render%20()%20%7B%0A%20%20%20%20%20%20%20%20return%20%60%3Cul%3E%20%7B%7B%23items%7D%7D%20%3Cli%3E%7B%7B.%7D%7D%3C%2Fli%3E%20%7B%7B%2Fitems%7D%7D%3C%2Ful%3E%60%3B%0A%20%20%20%20%7D%0A%7D%0A%0AOmi.makeHTML(%27List%27%2C%20List)%3B%0A%0Aclass%20Todo%20extends%20Omi.Component%20%7B%0A%20%20%20%20constructor(data)%20%7B%0A%20%20%20%20%20%20%20%20super(data)%3B%0A%20%20%20%20%20%20%20%20this.data.length%20%3D%20this.data.items.length%3B%0A%20%20%20%20%20%20%20%20this.listData%20%3D%20%7B%20items%20%3A%20this.data.items%20%7D%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20add%20(evt)%20%7B%0A%20%20%20%20%20%20%20%20evt.preventDefault()%3B%0A%20%20%20%20%20%20%20%20this.list.data.items.push(this.data.text)%3B%0A%20%20%20%20%20%20%20%20this.data.length%20%3D%20this.list.data.items.length%3B%0A%20%20%20%20%20%20%20%20this.data.text%20%3D%20%27%27%3B%0A%20%20%20%20%20%20%20%20this.update()%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20style%20()%20%7B%0A%20%20%20%20%20%20%20%20return%20%60%0A%20%20%20%20%20%20%20%20h3%20%7B%20color%3Ared%3B%20%7D%0A%20%20%20%20%20%20%20%20button%7B%20color%3Agreen%3B%7D%60%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20handleChange(target)%7B%0A%20%20%20%20%20%20%20%20this.data.text%20%3D%20target.value%3B%0A%20%20%20%20%7D%0A%0A%20%20%20%20render%20()%20%7B%0A%20%20%20%20%20%20%20%20return%20%60%0A%20%20%20%20%20%20%3Cdiv%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ch3%3ETODO%3C%2Fh3%3E%0A%20%20%20%20%20%20%20%20%20%20%3CList%20name%3D%22list%22%20data%3D%22listData%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cform%20onsubmit%3D%22add(event)%22%20%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cinput%20type%3D%22text%22%20onchange%3D%22handleChange(this)%22%20%20value%3D%22%7B%7Btext%7D%7D%22%20%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cbutton%3EAdd%20%23%7B%7Blength%7D%7D%3C%2Fbutton%3E%0A%20%20%20%20%20%20%20%20%20%20%3C%2Fform%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%60%3B%0A%20%20%20%20%7D%0A%7D%0A%0AOmi.render(new%20Todo(%7B%20items%3A%20%5B%27Omi%27%2C%27dntzhang%27%2C%27AlloyTeam%27%5D%20%2C%20text%20%3A%20%27%27%20%7D)%2C%27%23container%27)%3B');
|
||||
}else if(type === 'hello_es5'){
|
||||
goto('http://alloyteam.github.io/omi/example/playground/index.html?code=var%20Hello%20%3D%20%20Omi.create(%22Hello%22%2C%20%7B%0A%20%20%20%20style%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20return%20%22h1%7B%20cursor%3Apointer%20%7D%22%3B%0A%20%20%20%20%7D%2C%0A%20%20%20%20handleClick%3A%20function%20(dom)%20%7B%0A%20%20%20%20%20%20%20%20alert(dom.innerHTML)%0A%20%20%20%20%7D%2C%0A%20%20%20%20render%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20return%20%27%20%3Cdiv%3E%3Ch1%20onclick%3D%22handleClick(this%2C%20event)%22%3EHello%20%2C%7B%7Bname%7D%7D!%3C%2Fh1%3E%3C%2Fdiv%3E%27%0A%20%20%20%20%7D%0A%7D)%3B%0A%0Avar%20Test%20%3D%20%20Omi.create(%22Test%22%2C%20%7B%0A%20%20%20%20render%3A%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20return%20%27%3Cdiv%3E%5C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cdiv%3ETest%3C%2Fdiv%3E%5C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CHello%20data-name%3D%22Omi%22%20%2F%3E%5C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdiv%3E%27%0A%20%20%20%20%7D%0A%7D)%3B%0A%0AOmi.render(new%20Test()%2C%27%23container%27)%3B');
|
||||
}else if(type==='lifecycle'){
|
||||
|
|
|
|||
Loading…
Reference in New Issue