Home/ Questions/Q 6554411
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T12:41:47+00:00

I’m trying to display a list of projects using backbone.js. Basically, backbone should be

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can add bootstrapped models to the template: 

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

    And then in your view constructor replace this.projects.fetch(...) with this.projects.reset(INITIAL_DATA)

    • 0