CODEWITHSUNDEEP
backbone.js
James Fleming
James Fleming

Reputation: 2589

backbone model variable only populating when I step into method

The situation I'm experiencing is that my fetch is working fine, I can see the data in my backbone collection, if I step into the method where I assign the item from the collection to the model var or pause for a second or two, all is well: the line of code this.member gets populated

this.member = this.members.get(1);

. If I just let the code run, I wind up passing in a null model to my view. I don't understand what I'm missing. Do I need to bind data in the collection before I access the collection? I'm trying to fall in love with Backbone, but so far, she's been a cruel mistress...

`

//create the namespace
var Endeavor = {
    Models: {},
    Collections: {},
    Views: {},
    Templates: {}
};

Endeavor.Models.Member = Backbone.Model.extend({
    idAttribute: "Id"
});

Endeavor.Collections.Members = Backbone.Collection.extend({
    model: Endeavor.Models.Member,
    url: "Http://localhost:60000/api/members/" + "1", // $.cookie('UserId') 
    initialize: function () {
        console.log("Members collections init");
    }
});



Endeavor.Views.MemberView = Backbone.View.extend({
    id: "memberForm",
    template: "#memberTemplate",
    initialize: function () {
        console.log('init member view');
    },
    render: function () {
        console.log('memberView render called');
        console.log(this.model.toJSON());
        var html = $(this.template).tmpl();
        $(this.el).html(html);
        $("#Name").text = this.model.Name;
    }
});

jQuery(document).ready(function () {
    // router
    Endeavor.Router = Backbone.Router.extend({
        routes: {
            "": "lists",
        },

        lists: function () {
            this.members = new Endeavor.Collections.Members();
            this.members.fetch();

            this.member = this.members.get(1);

            var memberView = new Endeavor.Views.MemberView({ model: this.member });
            memberView.render();
            $("#content").html(memberView.el);
        }
    });
    // populate local variables
    var appRouter = new Endeavor.Router();
    Backbone.history.start();
});

`.

Upvotes: 0

Views: 193

Answers (1)

rinat.io
rinat.io

Reputation: 3198

Members.fetch is async call. Try to render view on members reset event, or pass success callback in fetch method, or call this.members.fetch({async: false}). There are many different options.

Upvotes: 2

Related Questions