50

I'm trying to understand how a portion of backbone.js works. I have to fetch a collection of models once the app begins. I need to wait until fetch is complete to render each view. I'm not 100% sure the best approach to take in this instance.

var AppRouter = Backbone.Router.extend({
    routes: {
        "": "home",
        "customer/:id": "customer" 
    },

    home: function () {
        console.log("Home");
    },

    customer: function (id) {
        if (this.custromers == null)
            this.init();

        var customer = this.customers.at(2); //This is undefined until fetch is complete. Log always says undefined.
        console.log(customer);
    },

    init: function () {
        console.log("init");
        this.customers = new CustomerCollection();
        this.customers.fetch({
            success: function () {
                console.log("success"); 
                // I need to be able to render view on success.
            }
        });
        console.log(this.customers);
    }
});    
3
  • Do you know how many Objects you're getting in advance? Why do you need to wait until they're all down before you render. Can you not design the page to allow each object to render itself and attach it to the Dom?
    – tkone
    Feb 12, 2012 at 17:03
  • When I try to run this.customers.at(2) and grab the second object it always comes back undefined unless I wait until success is fired on fetch. I'm assuming, it's something I'm doing wrong and not fully understanding. I'm pretty new to JScript.
    – Frankie
    Feb 12, 2012 at 17:05
  • FYI. It's JavaScript not jscript. Jscript is the Microsoft bastard child varient. But yes fetch is non-blocking which means that if you call fetch, the next command will run regardless of the results of fetch. Look at my answer below.
    – tkone
    Feb 12, 2012 at 17:08

6 Answers 6

65

The method I use is the jQuery complete callback like this:

var self = this;
this.model.fetch().done(function(){
  self.render();
});

This was recommended in a Backbone bug report. Although the bug report recommends using complete, that callback method has since been deprecated in favor of done.

11
  • 3
    This is super easy and works perfectly. I highly recommend this answer. Jan 10, 2013 at 22:41
  • Michael, you must be calling the render function elsewhere too. Perhaps after you instantiate your view?
    – SeanK
    Oct 31, 2013 at 19:57
  • I dont think it is wise to render the view within itself. it's error prone. Dec 4, 2014 at 9:14
  • @BonifatiusK Why? And whree do you suggest placing the render function instead?
    – Rovanion
    Dec 4, 2014 at 23:42
  • 1
    @BonifatiusK You didn't answer why the method presented in the above answer would be more error prone than firing the render function from somewhere else. Of course every developer should use their own judgement, but this snippet keeps all code related to the view inside the view. Having code related to the view in another file just makes the code hard to untangle. But there are certainly situations in which you wouldn't want to render the view directly when the fetch is complete, but doing just that is what the question asked for - a method for delaying rendering until the fetch is complete.
    – Rovanion
    Dec 5, 2014 at 13:33
24

You can also do this with jquery 1.5+

$.when(something1.fetch(), something2.fetch()...all your fetches).then(function() {
   initialize your views here
});
3
  • Had no idea this existed. Thanks. Jul 15, 2013 at 17:44
  • 1
    I am trying this with fetching collections but its not working. It is giving me json instead of a collection for the_value: $.when(collection.fetch()).then(function(the_value){console.log(the_value)})
    – Ray
    Dec 17, 2014 at 22:59
  • is this parallel or series logic? Jun 25, 2015 at 17:48
10

You can send your own options.success to the collections fetch method which runs only when the fetch is complete


EDIT (super late!)

From the backbone source (starting line 624 in 0.9.1)

fetch: function(options) {
  options = options ? _.clone(options) : {};
  if (options.parse === undefined) options.parse = true;
  var collection = this;
  var success = options.success;
  options.success = function(resp, status, xhr) {
    collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options);
    if (success) success(collection, resp);
  };

Note the second to last line. If you've passed in a function in the options object as the success key it will call it after the collection has been parsed into models and added to the collection.

So, if you do:

this.collection.fetch({success: this.do_something});

(assuming the initialize method is binding this.do_something to this...), it will call that method AFTER the whole shebang, allowing you trigger actions to occur immediately following fetch/parse/attach

4
  • I'm on my phone waiting to get my car fixed :). Will do when I return home! FYI the backbone source code is very well commented and annotated. You might want to just look at fetch in the meantime
    – tkone
    Feb 12, 2012 at 17:09
  • @tkone Still on your cellphone? :) Mar 16, 2012 at 19:16
  • @ScottGreenfield wow that one slipped my mind. There's what I was talking about though.
    – tkone
    Mar 16, 2012 at 19:28
  • I didn't want my Models or Collections to have any references to the view in my backbone definitions JS file. This method allows me to avoid that. Thanks
    – IcedDante
    Nov 30, 2014 at 2:41
2

Another useful way might be to bootstrap in the data directly on page load. This if from the
FAQ:

Loading Bootstrapped Models

When your app first loads, it's common to have a set of initial models that you know you're going to need, in order to render the page. Instead of firing an extra AJAX request to fetch them, a nicer pattern is to have their data already bootstrapped into the page. You can then use reset to populate your collections with the initial data. At DocumentCloud, in the ERB template for the workspace, we do something along these lines:

<script>
  var Accounts = new Backbone.Collection;
  Accounts.reset(<%= @accounts.to_json %>);
  var Projects = new Backbone.Collection;
  Projects.reset(<%= @projects.to_json(:collaborators => true) %>);
</script>
1

Another option is to add the following inside of your collections initialize method:

this.listenTo(this.collection, 'change add remove update', this.render);

This will fire off the render method whenever the fetch is complete and/or the collection is updated programmatically.

0

You Can Use on and Off Methods

if you want to add trigger method like suppose if you want on success you want to call render method so please follow below example.

    _this.companyList.on("reset", _this.render, _this);
    _this.companyList.fetchCompanyList({firstIndex: 1, maxResult: 10},     _this.options);

in Model js please use like

    fetchCompanyList: function(data, options) {
    UIUtils.showWait();
    var collection = this;
    var condition = "firstIndex=" + data.firstIndex + "&maxResult=" + data.maxResult;
    if (notBlank(options)) {
        if (notBlank(options.status)) {
            condition += "&status=" + options.status;
        }
    }
    $.ajax({
        url: "webservices/company/list?" + condition,
        type: 'GET',
        dataType: 'json',
        success: function(objModel, response) {
            UIUtils.hideWait();
            collection.reset(objModel);
            if (notBlank(options) && notBlank(options.triggerEvent)) {
                _this.trigger(options.triggerEvent, _this);
            } 
        }
    });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.