Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone not firing render event
    primarykey
    data
    text
    <p>I have tried to created two views and change collection in different situations. I dont know how to setup this.collection.bind so it raises event render on every collection change.</p> <p>There are 3 situations where I expect view <code>BusinessListView</code> to fire <code>render</code></p> <ol> <li><code>this.businesslist.collection = new Businesses([{ name: '1'}, { name: '2' }]);</code></li> <li><code>this.businesslist.set();</code> which calls <code>this.collection = new Businesses([{ name: '3'}, { name: '4' }]);</code></li> <li><code>this.search_location = new SearchLocation();</code> which is different view, then send collection to view <code>BusinessListView</code></li> </ol> <p>I was expecting to see data in console on 1 and 2, it doesnt work. If I add .render() manually I can see collection has changed. Could you please explain how this works?</p> <p><strong>UPDATE</strong></p> <p>Thanks to Alex this is fully working solution:</p> <p><a href="http://jsfiddle.net/feronovak/RAPjM/" rel="nofollow">http://jsfiddle.net/feronovak/RAPjM/</a></p> <pre><code>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(); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload