Question

我想尝试Backbone.js并从着名的TodoMVC-App开始。我想通过输入字段添加更多属性（或者只有一个带有“todo”的输入字段），但我无法弄清楚如何。

在我尝试使用Angular.js之前，这有点容易了 - 现在我仍然坚持要为每个输入字段添加更多属性。

任何人都可以给我一个最佳/最简单的方法吗？

一些相关的代码段：

的index.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>

模型/ 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('');
}

希望这是足够的信息，否则请告诉我！

Answer 1

按照标题的方式进行添加新输入。更改appView#newAttributes方法以将新输入的值传递给模型更改appView#createOnEnter方法以重置字段更改#item-template以在Todo模板中包含新属性。

其他所有内容都是自动的（包括将新属性设置为模型（作为参数传递）并将新属性传递给模板（因为我们使用Model#toJSON方法））。

修改
this.$input是对this.$('#new-todo')的引用（请参阅initialize方法），因此其val是标题。您需要创建一个新的var：
在initialize：

this.$quantity = this.$('#newQuantity');

在newAttributes：

quantity: this.$quantity.val(); // you're not making any check here // add one if necessary (you can use underscore), eg // _.isNumber(quantity = this.$('#newQuantity')) ? quantity : 0 // number being declared before, else it'd be global

在createOnEnter：

this.$quantity.val('');

backbone.js todomvc为模型添加更多属性

1 个答案: