Databases
StackOverflow2013
Postsdbo
POBackbone view not updating properly
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackbone view not updating properly
    text
    copied!<p>I want to display a list, and once an item in the list is clicked on, I want the list to be hidden, and to retrieve and show the item's details.</p> <p>The mouse click fires, the details are retrieved from the REST web service, and the item list is hidden. The problem is that the item details don't appear until I refresh the page. I can't quite see what I'm doing wrong.</p> <p>Here's an example of my code:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Backbone Test&lt;/title&gt; &lt;script type="text/javascript" src="js/lib/jquery-1.7.1-min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/lib/underscore-min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/lib/backbone-min.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt;VIN Search List:&lt;/div&gt; &lt;div id="item-list" /&gt; &lt;div id="item-details" /&gt; &lt;script type="text/javascript"&gt; $(function() { var Item = Backbone.Model.extend({ urlRoot: "rest/search", defaults: { "uid": "" } }); var Items = Backbone.Collection.extend({ model: Item, url: "rest/search/", }); var ItemDetail = Backbone.Model.extend({ urlRoot: "rest/search/details", defaults: { "uid": "", "details": "" }, url : function() { return this.id ? this.urlRoot + '/' + this.id : this.urlRoot; } }); var ListView = Backbone.View.extend( { tagName: "ol", initialize: function() { _.bindAll(this, 'render'); this.model.bind("destroy", this.close, this); }, render: function() { _.each(this.model.models, function(uid) { $(this.el).append( new ItemView({model:uid}).render().el ); }, this); return this; }, close: function() { $(this.el).unbind(); $(this.el).remove(); }, }); var ItemView = Backbone.View.extend( { tagName: "li", template: _.template("&lt;%= uid %&gt;"), events: { "click": "showDetails" }, initialize: function() { _.bindAll(this, 'render'); this.model.bind("change", this.render, this); this.model.bind("destroy", this.close, this); }, render: function(eventName) { $(this.el).html( this.template( this.model.toJSON() ) ); return this; }, close: function() { $(this.el).unbind(); $(this.el).remove(); }, showDetails: function() { app.navigate("details/" + this.model.get("uid"), {trigger: true}); return false; }, }); var DetailsView = Backbone.View.extend( { tagName: "ul", template: _.template("&lt;li&gt;&lt;%= uid %&gt;&lt;/li&gt;&lt;li&gt;&lt;%= details %&gt;&lt;/li&gt;"), initialize: function() { _.bindAll(this, 'render'); this.model.bind("change", this.render, this); this.model.bind("destroy", this.close, this); }, render: function(eventName) { $(this.el).html( this.template( this.model.toJSON() ) ); return this; }, close: function() { $(this.el).unbind(); $(this.el).remove(); }, }); var AppRouter = Backbone.Router.extend({ routes: { "": "list", "details/:uid": "Details" }, list: function() { var self = this; this.itemList = new Items(); this.itemList.fetch( { success: function() { self.listView = new ListView({model: self.itemList}); $('#item-list').html( self.listView.render().el ); } }); }, Details: function(uid) { if (this.lListView) this.listView.close(); var self = this; this.details = new ItemDetail({id: uid}); this.details.fetch( { success: function() { self.detailsView = new DetailsView({model: self.details}); $('#item-details').html( self.detailsView.render().el ); } }); }, }); // Start up var app = new AppRouter(); Backbone.history.start(); }); &lt;/script&gt; </code></pre>
 

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