0

何時間も費やしましたが、それでもそれを理解することはできません。sampleData.jsonファイルには、次のjsonオブジェクトが含まれています。

[{name: "Tim", age: 5},{name: "Ida", age: 26},{name: "Rob", age: 55}]

このデータがコレクションオブジェクトで利用できないのはなぜですか？

var ListCollection = Backbone.Collection.extend({
    url: '/sampleData.json'
});



var ListView = Backbone.View.extend({
    el: $('#file-list'),
    initialize: function () {
        _.bindAll(this, 'render');
        this.render(); 
},
render: function() {
    $(this.collection.toJSON()).each(function(key, val) {
        console.log(val['name']);
    });
}
});

var list = new ListCollection();

list.fetch();

var listView = new ListView({
    collection: list
});
4

2 に答える 2

3

呼び出しは実際には AJAX 呼び出しであるため、ビュー内で使用しようlist.fetch()としたときにサーバーから何かを取得するという保証はありません。this.collection通常のアプローチには 2 つのコンポーネントがあります。

  1. render空のコレクションを操作できるように賢くしてください。
  2. renderコレクションの"reset"イベントにバインドします。

するとfetch、イベントがトリガーされます"reset"。

モデル データがサーバーから返されると、コレクションはリセットされます。

したがって、コレクションの"reset"イベントにバインドするとrender、サーバーがデータを返すようになったときに、ビューの呼び出しがトリガーされます。

したがって、次のようなものがもっと必要です。

var ListView = Backbone.View.extend({
    el: $('#file-list'),
    initialize: function () {
        _.bindAll(this, 'render');
        this.collection.on('reset', this.render);
        this.render(); 
    },
    render: function() {
        // Whatever really happens here should be able to handle an empty collection.
        this.collection.each(function(m) {
            console.log(m.get('name'));
        });
        return this; // This is conventional, it is expected of you that you do this.
    }
});

eachjQuery のものから Underscore のものに切り替えたことに気付くでしょうeach。バックボーン コレクションにはさまざまな Underscore メソッドが混在しているため、それらを使用することもできます。

Backbone はイベント ベースのシステムなので、問題が発生した場合は、まずイベント処理 (またはイベント処理の欠如) を調べてください。

さらに、これ：

[ {name: "Tim", age: 5}, {name: "Ida", age: 26}, {name: "Rob", age: 55} ]

は JavaScript であり、JSON ではありません。わずかな違いがあります。次のsampleData.jsonようになります。

[{"name":"Tim","age":5},{"name":"Ida","age":26},{"name":"Rob","age":55}]

オブジェクト内のキーを囲む引用符に注意してください。JSON にはそれらが必要です。

于 2012-06-27T04:11:43.273 に答える
0

まず、'this.collection.toJSON()' を jquery の要素セレクターに渡します。jQuery の each はそのようには機能しません - $.each(this.collection.toJSON()) が必要です。

第二に、私が間違っている場合は修正してください。ただし、コンストラクターで渡した場合、 this.collection を単純に使用することはできません。this.options.collection を使用する必要があります。

また、バックボーンを使用している場合は、アンダースコアを自由に使用できます。これが違いを生むかどうかはわかりませんが、アンダースコアは、存在する場合はネイティブの forEach を使用し (firefox、chrome)、ie およびその機能を持たない他のブラウザーにフォールバックします。jqueryがそれを行うかどうかはわかりません。したがって、これらの場合、速度は確実に向上します。

于 2012-06-27T03:48:22.880 に答える