Clueless on preloading collection from server using Backbone.js and Tastypie
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.

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.

app.js:

    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);


Template:

    .........
        <script>
            PROJECT_ENDPOINT = "{% url api_dispatch_list resource_name="project" %}";        
        </script>


        <script type="text/template" charset="utf-8" id="project-template">
            <span class="project-title"><%= title %></span>
        </script>

      </head>
 
      <body>
          <div id="container"></div>
      </body>
    </html>
Clueless on preloading collection from server using Backbone.js and Tastypie
===

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.

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.

app.js:

    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);


Template:

    .........
        <script>
            PROJECT_ENDPOINT = "{% url api_dispatch_list resource_name="project" %}";        
        </script>


        <script type="text/template" charset="utf-8" id="project-template">
            <span class="project-title"><%= title %></span>
        </script>

      </head>
 
      <body>
          <div id="container"></div>
      </body>
    </html>