StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POBackbone change model of View
text
Body
copied!<p>I am fairly new to Backbone and have the following question:</p> <p>I have a collection of models.</p> <p>I have a collection view displaying tabs (with a view for each model in the collection).</p> <p>I have a view for a model (for the content).</p> <p>I have a router with routes.</p> <p>What I am trying to achieve is a functionality like <a href="http://jqueryui.com/demos/tabs/">http://jqueryui.com/demos/tabs/</a></p> <p>I click on a tab (model of collection) and then want to pass the model to the content view maybe change it and reflect the changes in the collection.</p> <p>I came up with four solutions:</p> <p>In the router:</p> <pre><code>'switchCommunity': function(id) { // (a) set new model attributes this.view.community.model.set(communities.get(id)); // (b) replace model this.view.community.model = communities.get(id); // (c) a custom function of the view changes its model this.view.community.changeModel(communities.get(id)); // (d) a new view this.view.community = new View({ model: communities.get(id) }) } </code></pre> <p>The problem here is</p> <ul> <li><p>(a) does not reflect changes to the model in the collection</p></li> <li><p>(b) does not trigger (change) events, because the bind in the initialize function of the view never triggers, because it is a completly new model</p></li> <li><p>(c) seems like a hack to me</p></li> <li><p>(d) everytime i click on a tab a new view is created (is this a performance issue?)</p></li> </ul> <p>What is the best pratice here?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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