3

デモフィドル（問題あり）http://jsfiddle.net/mjmitche/UJ4HN/19/

私はこのように定義されたコレクションを持っています

var Friends = Backbone.Collection.extend({
    model: Friend,

    localStorage: new Backbone.LocalStorage("friends-list")
});

私の知る限り、ローカルストレージを機能させるために必要なのはそれだけです（backbone.jsの下に含めることに加えて）

よくわからなかったのですが、「friends-list」という名前はDOM要素に対応している必要がありますか？「friends-list」を保存しようとしているので、ローカルストレージにそれを呼び出しましたが、localstorageはクラスまたはIDを渡す必要がないようです。

これが私がやろうとしていることを見ることができるフィドルですhttp://jsfiddle.net/mjmitche/UJ4HN/19/

私のローカルサイトでは、数人の友達を追加してページを更新していますが、友達が再表示されていません。

アップデート

ローカルサイトのコードでも次のことを行いました

console.log(Backbone.LocalStorage);

エラーは発生しません。

デバッグの試み

window.AppViewでこのコード（別のSO回答から取得）を試しましたが、コンソールに何も表示されませんでした。

this.collection.fetch({}, {
    success: function (model, response) {
        console.log("success");
    },
    error: function (model, response) {
        console.log("error");
    }
})
4

1 に答える 1

6

細かいマニュアルから：

簡単に言うと、バックボーン用の localStorage アダプターです。localStorage データベースへの保存を処理する Backbone.Sync() のドロップイン置換です。

saveこの LocalStorage プラグインは、Backbone.Sync の単なる代替であるため、モデルとfetchコレクションを引き続き使用する必要があります。

何も保存しないので、LocalStorage データベースには何も入れません。モデルを保存する必要があります。

showPrompt: function() {
    var friend_name = prompt("Who is your friend?");
    var friend_model = new Friend({
        name: friend_name
    });
    //Add a new friend model to our friend collection
    this.collection.add(friend_model);
    friend_model.save(); // <------------- This is sort of important.
},

successその上でとerrorコールバックを使用することfriend_model.save()もできます。

何もしていないのでfetch、LocalStorage データベースにあるものでコレクションを初期化しません。コレクションを呼び出す必要があり、fetchおそらくrenderその"reset"イベントにバインドする必要があります。

initialize: function() {
    _.bindAll(this, 'render', 'showPrompt');
    this.collection = new Friends();
    this.collection.bind('add', this.render);
    this.collection.bind('reset', this.render);
    this.collection.fetch();
},

renderコレクション全体をレンダリングできるようにするには、も更新する必要があります。

render: function() {
    var $list = this.$('#friends-list');
    $list.empty();
    this.collection.each(function(m) {
        var newFriend = new FriendView({ model: m });
        $list.append(newFriend.render().el);
    });
    $list.sortable();
    return this; 
}

「1 つのモデルのビューを追加する」ロジックを別のメソッドに移動し、そのメソッドをコレクションの"add"イベントにバインドすることで、これを改善できます。

そして、フィドルの削除され修正されたバージョン: http://jsfiddle.net/ambiguous/haE9K/

于 2012-09-22T03:11:06.330 に答える