2つのビューを作成し、さまざまな状況でコレクションを変更しようとしました。this.collection.bindを設定する方法がわからないため、コレクションが変更されるたびにイベントレンダリングが発生します。
BusinessListView
ビューが発火すると予想される状況は3つありますrender
this.businesslist.collection = new Businesses([{ name: '1'}, { name: '2' }]);
this.businesslist.set();
これはthis.collection = new Businesses([{ name: '3'}, { name: '4' }]);
this.search_location = new SearchLocation();
これは別のビューであり、コレクションをビューに送信しますBusinessListView
1と2のコンソールにデータが表示されることを期待していましたが、機能しません。.render()を手動で追加すると、コレクションが変更されたことがわかります。これがどのように機能するか説明していただけますか?
アップデート
Alexのおかげで、これは完全に機能するソリューションです。
http://jsfiddle.net/feronovak/RAPjM/
var App = {
run: function() {
this.businesslist = new BusinessListView();
this.businesslist.collection = new Businesses([{ name: '1'}, { name: '2' }]);
// this.businesslist.render(); // uncomment to see collection change
this.businesslist.set();
this.search_location = new SearchLocation();
}
};
Business = Backbone.Model.extend({});
Businesses = Backbone.Collection.extend({
model: Business
});
BusinessListView = Backbone.View.extend({
initialize: function(options) {
this.collection = new Businesses();
this.collection.bind("reset", this.render(), this);
},
render: function() {
console.log(this.collection.toJSON());
},
set: function()
{
this.collection = new Businesses([{ name: '3'}, { name: '4' }]);
// this.render(); // uncomment to see collection change
}
});
SearchLocation = Backbone.View.extend({
el: "#search",
initialize: function() {
this.sendData();
},
sendData: function() {
// Send [{ name: '5'}, { name: '6' }] to this.businesslist = new Businesses([{ name: '5'}, { name: '6' }]);
}
});
$(document).ready(function(e) {
App.run();
});