52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
import Omi from '../../src/index.js';
|
|
import List from './list.js';
|
|
|
|
Omi.makeHTML('List', List);
|
|
|
|
class Todo extends Omi.Component {
|
|
constructor(data) {
|
|
super(data);
|
|
this.data.length = this.data.items.length;
|
|
this.listData = { items : this.data.items };
|
|
}
|
|
|
|
add (evt) {
|
|
evt.preventDefault();
|
|
this.list.data.items.push(this.data.text);
|
|
this.data.length = this.list.data.items.length;
|
|
this.data.text = '';
|
|
this.update();
|
|
}
|
|
|
|
style () {
|
|
return `
|
|
h3 { color:red; }
|
|
button{ color:green;}
|
|
`;
|
|
}
|
|
|
|
handleChange(target){
|
|
this.data.text = target.value;
|
|
}
|
|
|
|
render () {
|
|
return `<div>
|
|
<h3>TODO</h3>
|
|
<List name="list" data="listData" />
|
|
|
|
<List name="list" data="listData" />
|
|
|
|
<List name="list" data="listData" ssc />
|
|
|
|
<List name="list" data="listData" />
|
|
|
|
<form onsubmit="add(event)" >
|
|
<input type="text" onchange="handleChange(this)" value="{{text}}" />
|
|
<button>Add #{{length}}</button>
|
|
</form>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
export default Todo;
|