Backbone: Fetched Data From Server Not Displaying On View

I'm new to backbone and I just can't seem to display the data from a collection. Please point out the incorrect part. Consider these js codes: App.ProvidersView = Backbone.View.ext

Solution 1:

Finally got this to work after some time.

The point is that fetch() is asynchronous, meaning it returns before data from the server is loaded.

Here's the fix:

App.addInitializer(function() {

    var providers = newApp.ProviderCollection();
    var provider = newApp.Provider();

    var providersView = newApp.ProvidersView({
        model: Provider,
        collection: Providers
    });

    providers.fetch({success: function() {
        console.log(Providers.models);
        providersView.render(); // Render after loading
    }});

    $("#main").html(providersView.el);
    $("#providers-list").html(provider.el);

});

Solution 2:

Try this:

render: function() {
    var html = $(this.template).tmpl();
    $(this.el).html(html).addClass('container-fluid');
    var that = this;
    this.collection.each(function() {
        that.renderProvider();
    });
}

I guess, in your renderProvider method, You are getting wrong context of this. This should work !!