Databases
StackOverflow2013
Postsdbo
PORender function of view is not working
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORender function of view is not working
    text
    copied!<p>This example is from <a href="http://coenraets.org/blog/2011/12/backbone-js-wine-cellar-tutorial-part-1-getting-started/" rel="nofollow">this</a> site </p> <p><strong>main.js</strong></p> <pre><code>// Models var Wine = Backbone.Model.extend(); var WineCollection = Backbone.Collection.extend({ model:Wine, url:"api/wines" }); // Views var WineListView = Backbone.View.extend({ tagName:'ul', initialize:function () { this.model.bind("reset", this.render, this); }, render:function (eventName) { alert("WineListView"); _.each(this.model.models, function (wine) { this.$el.append(new WineListItemView({model:wine}).render().el); }, this); return this; } }); var WineListItemView = Backbone.View.extend({ tagName:"li", template:_.template($('#tpl-wine-list-item').html()), render:function (eventName) { alert("hi" ) this.$el.html(this.template(this.model.toJSON())); return this; } }); var WineView = Backbone.View.extend({ tagName:'div', template:_.template($('#tpl-wine-details').html()), render:function (eventName) { alert("WineView" ); this.$el.html(this.template(this.model.toJSON())); return this; } }); // Router var AppRouter = Backbone.Router.extend({ routes:{ "":"list", "wines/:id":"wineDetails" }, list:function () { this.wineList = new WineCollection(); this.wineListView = new WineListView({model:this.wineList}); this.wineList.fetch(); $('#sidebar').html(this.wineListView.render().el); }, wineDetails:function (id) { this.wine = this.wineList.get(id); this.wineView = new WineView({model:this.wine}); $('#content').html(this.wineView.render().el); } }); var app = new AppRouter(); Backbone.history.start(); </code></pre> <p><strong>index.html</strong></p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Backbone Cellar&lt;/title&gt; &lt;link rel="stylesheet" href="../css/styles.css" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="header"&gt;&lt;span class="title"&gt;Backbone Cellar&lt;/span&gt;&lt;/div&gt; &lt;div id="sidebar"&gt;&lt;/div&gt; &lt;div id="content"&gt; &lt;!--&lt;h2&gt;Welcome to Backbone Cellar&lt;/h2&gt; &lt;p&gt; This is a sample application part of of three-part tutorial showing how to build a CRUD application with Backbone.js. &lt;/p&gt;--&gt; &lt;/div&gt; &lt;!-- Templates --&gt; &lt;script type="text/template" id="tpl-wine-list-item"&gt; &lt;a href='#wines/&lt;%= id %&gt;'&gt;&lt;%= name %&gt;&lt;/a&gt; &lt;/script&gt; &lt;script type="text/template" id="tpl-wine-details"&gt; &lt;div class="form-left-col"&gt; &lt;label&gt;Id:&lt;/label&gt; &lt;input type="text" id="wineId" name="id" value="&lt;%= id %&gt;" disabled /&gt; &lt;label&gt;Name:&lt;/label&gt; &lt;input type="text" id="name" name="name" value="&lt;%= name %&gt;" required/&gt; &lt;label&gt;Grapes:&lt;/label&gt; &lt;input type="text" id="grapes" name="grapes" value="&lt;%= grapes %&gt;"/&gt; &lt;label&gt;Country:&lt;/label&gt; &lt;input type="text" id="country" name="country" value="&lt;%= country %&gt;"/&gt; &lt;label&gt;Region:&lt;/label&gt; &lt;input type="text" id="region" name="region" value="&lt;%= region %&gt;"/&gt; &lt;label&gt;Year:&lt;/label&gt; &lt;input type="text" id="year" name="year" value="&lt;%= year %&gt;"/&gt; &lt;/div&gt; &lt;div class="form-right-col"&gt; &lt;!-- &lt;img height="300" src="../pics/&lt;%= picture %&gt;"/&gt;--&gt; &lt;label&gt;Notes:&lt;/label&gt; &lt;textarea id="description" name="description"&gt;&lt;%= description %&gt;&lt;/textarea&gt; &lt;/div&gt; &lt;/script&gt; &lt;!-- JavaScript --&gt; &lt;script src="lib/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="lib/underscore.js"&gt;&lt;/script&gt; &lt;script src="lib/backbone.js"&gt;&lt;/script&gt; &lt;script src="js/main.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>In main.js If i manually add models to collections it works fine. When i fetch from server using this.wineList.fetch(); and if I pass it to render function collection is empty. But if i give alert("something") in that function collection wont be empty. this.wineList.fetch() fetches the data from server and it doesnt call set function on collection. What would be the problem??</p> <p>In back-end I am using node.js. Front end I'm using backbone.js. I'm new to backbone technology. Please tell me what am i missing.</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