Closed charmingzuo closed 7 years ago
@devWayne
Nuclear目前支持下面两种方式的嵌套:
var TodoList = Nuclear.create({
render: function () {
return '<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>';
}
});
var TodoApp = Nuclear.create({
install: function () {
this.todoList = new TodoList( this.option)
},
onRefresh: function () {
this.form = this.node.querySelector("form");
this.textBox = this.node.querySelector("input");
this.form.addEventListener("submit", function (evt) {
evt.preventDefault();
this.option.items.push(this.textBox.value);
}.bind(this), false);
},
render: function () {
return '<div>\
<h3>TODO</h3>'
+ this.todoList.render()+
'<form >\
<input type="text" />\
<button>Add #{{items.length}}</button>\
</form>\
</div>';
}
});
new TodoApp({ items: [] },"#container");
var TodoList = Nuclear.create({
render: function () {
return '<ul> {{#items}} <li>{{.}}</li> {{/items}}</ul>';
}
});
var TodoApp = TodoList.create({
onRefresh: function () {
this.form = this.node.querySelector("form");
this.textBox = this.node.querySelector("input");
this.form.addEventListener("submit", function (evt) {
evt.preventDefault();
this.option.items.push(this.textBox.value);
}.bind(this), false);
},
render: function () {
return '<div>\
<h3>TODO</h3>'
+this._super()+
'<form >\
<input type="text" />\
<button>Add #{{items.length}}</button>\
</form>\
</div>';
}
});
new TodoApp( { items: [] },"#container");
就像 React 那样: