0

我想尝试 Backbone.js 并从著名的 TodoMVC-App 开始。我想通过输入字段添加更多属性（最初只有一个带有“todo”的输入字段），但我不知道如何。

在我尝试 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>

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

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

4

1 回答 1

0

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

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

编辑：
this.$input是对this.$('#new-todo')（参见initialize方法）的引用，因此它的 val 是标题。您需要创建一个新变量：
In 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('');
于 2013-04-20T21:42:53.913 回答