Question

我创建了一个简单的 Todo application on JS Fiddle 来学习Backbone.JS。我有TodosModuleView包装表单和TodosView呈现Todos集合

window.TodosModuleView = Backbone.View.extend({
    tagName: 'section',
    id: 'todoModule',
    events: {
        'keypress #frmTodo input[type=text]': 'addTodo'
    },
    initialize: function() {
        _.bindAll(this, 'render', 
                        'addTodo');
        this.collection.bind('reset', this.render);
        this.template = _.template($('#todosModuleTmpl').html());        },
    render: function() {
        console.log('rendering...');
        var todosView = new TodosView({ collection: this.collection });
        this.$el.html(this.template({}));
        this.$el.append(todosView.render().el);
        return this;
    },
    addTodo: function(e) {
        if (e.keyCode !== 13) 
            return;
        var todo = new Todo({ title: this.$('input[name=todo]').val() });
        this.collection.add(todo);
        console.log('added!');
        return false;
    }
});

当我添加待办事项时，我可以看到它已添加到集合中，但它似乎不会触发render()。此外，由于我使用的是本地存储商店，我希望我新添加的Todos应该在下次刷新时保留并呈现，但这似乎不会发生。查看Chrome的开发人员工具栏，我在Local Storage中看不到任何内容

更新

第一个问题通过 @mashingan 答案解决：使用add代替reset事件。现在我的本地存储有什么问题吗？

window.Todos = Backbone.Collection.extend({
    model: Todo,
    localStorage: new Backbone.LocalStorage('todos')
});

根据我的预期，变量是按值而不是引用传递的吗？我有TodosModuleView使用TodosView来呈现待办事项列表，也许我这样做是错误的？

Answer 1

您的LocalStorage无效，因为您没有保存任何内容。这样：

var todo = new Todo({ title: this.$('input[name=todo]').val() });
this.collection.add(todo);

只需创建一个新模型并将其添加到集合中，因此没有隐藏的todo.save()调用，因此新的Todo不会被保存。你必须自己保存：

var todo = new Todo({ ... });
todo.save();
this.collection.add(todo);

您还可以使用以下内容保存集合中的所有内容：

this.collection.invoke('save');

这会在集合中的每个模型上调用save。这可能对LocalStorage有意义，但如果你坚持使用远程服务器则没有多大意义。

如果你这样做：

var M = Backbone.Model.extend({});
var C = Backbone.Collection.extend({
    model: M,
    localStorage: new Backbone.LocalStorage('pancakes')
});
var c = new C;
c.add([
    { title: 'Fargo' },
    { title: 'Time Bandits' }
]);

然后你的pancakes数据库中没有任何内容，但如果你在最后添加c.invoke('save')：

var M = Backbone.Model.extend({});
#...
c.add([ ... ]);
c.invoke('save');

你会收到几部好电影。

演示：http://jsfiddle.net/ambiguous/ZV86g/

Answer 2

检查backbone catalog of events：reset（集合） - 当集合的全部内容被替换时。 add事件应该适用于您的情况。

Backbone.JS集合重置事件似乎没有触发

2 个答案: