0

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

これで十分な情報だといいのですが、そうでない場合は教えてください!

4

1 に答える 1