Backbone.js を試してみたいと思い、有名な TodoMVC-App から始めました。入力フィールドを介してさらにいくつかの属性を追加したいのですが (もともと「todo」を含む入力フィールドは 1 つしかありません)、方法がわかりません。
以前は Angular.js を試していましたが、それは少し簡単でした。今では、入力フィールドごとに属性を追加する方法に行き詰まっています。
これを達成するための最良/最も簡単な方法は何ですか?
関連するコード スニペット:
インデックス.html:
<tr class="userInputs" >
<td><input id="toggle-all" type="checkbox"></td>
<td><input type="text" id="new-todo" placeholder="What needs to be done?" autofocus style="width: 150px"/></td>
<td><input type="text" id="newQuantity"/></td>
<td colspan="2"><a ><img src="img/plus.png" id="addItem"></a></td>
</tr>
model/todo.js
app.Todo = Backbone.Model.extend({
// Default attributes for the todo
// and ensure that each todo created has `title` and `completed` keys.
defaults: {
title: '',
quantity: 0,
completed: false
}
});
ビュー/app.js:
initialize: function() {
this.allCheckbox = this.$('#toggle-all')[0];
this.$input = this.$('#new-todo');
this.$footer = this.$('#footer');
this.$main = this.$('#main');
this.listenTo(app.Todos, 'add', this.addOne);
this.listenTo(app.Todos, 'reset', this.addAll);
this.listenTo(app.Todos, 'change:completed', this.filterOne);
this.listenTo(app.Todos, 'filter', this.filterAll);
this.listenTo(app.Todos, 'all', this.render);
app.Todos.fetch();
}
addOne: function( todo ) {
var view = new app.TodoView({ model: todo });
$('#todo-list').append( view.render().el );
}
newAttributes: function() {
return {
title: this.$input.val().trim(),
quantity: this.$input.val().trim(),
order: app.Todos.nextOrder(),
completed: false
};
}
createOnEnter: function(e) {
app.Todos.create( this.newAttributes() );
this.$input.val('');
}
これで十分な情報だといいのですが、そうでない場合は教えてください!