CODEWITHSUNDEEP
backbone.js
Gambo
Gambo

Reputation: 1572

Additional Model is undefined

I am having problems including an additional model into my view which is based on a collection. I have a list of comments which is created by a parent view. Its need that I have the current user name when rendering the comments to show delete button and to highlight if its his own comment. The problem is now that I cant access in CommentListView the model session, so this.session in initialize or a call from a method like addAllCommentTo list is undefinied. What I am doing wrong here? I thought its easily possible to add another object to an view appart from the model.

CommentListView:

window.CommentListView = Backbone.View.extend({

    el: $("#comments"),

    initialize: function () {

        this.model.bind('reset', this.addAllCommentToList, this);
        this.model.bind('add', this.refresh, this);
        this.model.bind('remove', this.refresh, this);
    },

    refresh: function(){
        this.model.fetch();
    },

    addCommentToList : function(comment) {
        console.log("comment added to dom");
        //need to check why el reference is not working
        $("#comments").append(new CommentView({model:comment, sessionModel: this.session}).render().el);
    },

    addAllCommentToList: function() {
        $("#comments").empty();
        this.model.each(this.addCommentToList);
    }
});

Call from parent list in initialize method:

window.UserDetailView = Backbone.View.extend({

    events: {
        "click #newComment" : "newComment"
    },

    initialize: function () {
        this.commentText = $("#commentText", this.el);

        new CommentListView({ model: this.model.comments, session: this.model.session });


        new LikeView({ model: this.model.like });

        this.model.comments.fetch();

    },

    newComment : function() {

        console.log("new comment");
        this.model.comments.create(
            new Comment({text: this.commentText.val()}), {wait: true}
        );
        this.commentText.val('');
    }

});

Model:

window.UserDetail = Backbone.Model.extend({

    urlRoot:'/api/details',

    initialize:function () {
        this.comments = new Comments();
        this.comments.url = "/api/details/" + this.id + "/comments";

        this.like = new Like();
        this.like.url = "/api/details/" + this.id + "/likes";

        this.session = new Session();

    },

    ...
});

Upvotes: 0

Views: 115

Answers (1)

fguillen
fguillen

Reputation: 38772

I see one problem, but can there be others.

You are initializing the View like this:

new CommentListView({ model: this.model.comments, session: this.model.session });

And you are expecting into your View to have a reference like this this.session.

This is not gonna happen. All the hash you send to the View constructor will be stored into this.options, from Backbone View constructor docs:

When creating a new View, the options you pass are attached to the view as this.options, for future reference.

So you can start changing this line:

$("#comments").append(new CommentView({model:comment, sessionModel: this.session}).render().el);

by this other:

$("#comments").append(new CommentView({model:comment, sessionModel: this.options.session}).render().el);

Try and tell us.

Updated

Also change this line:

this.model.each(this.addCommentToList);

by this:

this.model.each(this.addCommentToList, this);

The second argument is the context, in other words: what you want to be this in the called handler.

Upvotes: 2

Related Questions