1

我在 JS Fiddle 上创建了一个简单的 Todo 应用程序来学习 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 的开发人员工具栏，我在本地存储中看不到任何内容

更新

@mashingan 的回答解决了第一个问题：使用add而不是reset事件。现在我的本地存储出了什么问题？

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

可能是变量是按值传递的，而不是像我期望的那样按引用传递吗？我有一个TodosModuleView用来TodosView呈现待办事项列表的，也许我做错了？

4

2 回答 2

3

您的 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/

于 2012-06-04T16:44:44.003 回答
1

检查事件的主干目录：（reset集合） - 当集合的全部内容已被替换时。有一个add事件应该适用于你的情况。

于 2012-06-03T10:17:21.477 回答