Databases
StackOverflow2013
Postsdbo
POClueless on preloading collection from server using Backbone.js and Tastypie
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POClueless on preloading collection from server using Backbone.js and Tastypie
    text
    copied!<p>I'm trying to display a list of projects using backbone.js. Basically, backbone should be able to .fetch() the projects into the Projects collection. This works, as I can tell from the async request which is filled with projects.</p> <p>But, how do I approach rendering them on page load? There's not much documentation about using the reset() method for 'bootstrapped models'. Any help is appreciated! Thanks.</p> <p>app.js:</p> <pre><code>var oldSync = Backbone.sync; Backbone.sync = function(method, model, success, error){ var newSuccess = function(resp, status, xhr){ if(xhr.statusText === "CREATED"){ var location = xhr.getResponseHeader('Location'); return $.ajax({ url: location, success: success }); } return success(resp); }; return oldSync(method, model, newSuccess, error); }; (function($) { window.Project = Backbone.Model.extend({}); window.Projects = Backbone.Collection.extend({ model: Project, url: PROJECT_ENDPOINT, parse: function(data) { return data.objects; } }); window.ProjectView = Backbone.View.extend({ tagName: 'li' , className: 'project', initialize: function() { _.bindAll(this, 'render'); this.model.bind('change', this.render); this.projects = new Projects(); this.projects.fetch(function(data) { console.log("haha"); }); this.template = _.template($('#project-template').html()); }, render: function() { var renderedContent = this.template(this.model.toJSON()); $(this.el).html(renderedContent); return this; } }); })(jQuery); </code></pre> <p>Template:</p> <pre><code>......... &lt;script&gt; PROJECT_ENDPOINT = "{% url api_dispatch_list resource_name="project" %}"; &lt;/script&gt; &lt;script type="text/template" charset="utf-8" id="project-template"&gt; &lt;span class="project-title"&gt;&lt;%= title %&gt;&lt;/span&gt; &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&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