1

Backbone.JSを学習するために、JSFiddleで簡単なTodoアプリケーションを作成しました。フォームをTodosModuleViewラップし、TodosViewTodoのコレクションをレンダリングするがあります

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

ToDoを追加すると、コレクションに追加されたことがわかりますが、トリガーされていないようrender()です。また、ローカルストレージストアを使用しているので、新しく追加したTodoは永続化され、次の更新時にレンダリングされるはずですが、それは発生しないようです。Chromeの開発者ツールバーを見ると、ローカルストレージに何も表示されません

アップデート

@mashinganの答えで解決された最初の問題：イベントaddの代わりに使用しresetます。ローカルストレージの何が問題になっていますか？

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

私が期待するように、変数が参照ではなく値によって渡される可能性がありますか？私はtodoリストをレンダリングするために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 に答える