Priya
Priya

Reputation: 13

Uncaught TypeError: Cannot read property 'el' of undefined, Only first model's description is visible. I want to show all the models

This is TodoView. I have added return this in render function of TodoView

    var TodoView=Backbone.View.extend({
    el:'h3',
        tagName:'article',
        id:'todo-view',
        className:'todo',
        template:_.template('<h3 class="<%=status%>">'+'<input type=checkbox '+'<%if(status==="complete") print("checked")%>/>'+'<%=description %></h3>'),
        events:{
            "click h3":"alertStatus",
            "change input":"toggleStatus"
        },
        alertStatus:function(e)
        {
            console.log('Hey you clicked TodoItem !');
        },
        toggleStatus:function()
        {
            this.model.toggleStatus();
        },
        initialize:function()
        {
            this.model.on('change',this.render,this);
            this.model.on('destroy',this.remove,this);
        },
        render:function()
        {
            var attributes=this.model.toJSON();
            this.$el.html(this.template(attributes));
            this.$el.delegate('h3','click',this.alertStatus);
            return this;
        },
        remove:function()
        {
            this.$el.remove();
        }


    });

This is view of the collection.

    var TodoListView=Backbone.View.extend({
        el:'h3',   

Here forEach is not fetching all the models. Only first model is visible in  div. I want to show all the models in the view. 

        render:function()
        {    
            this.collection.forEach(this.addOne,this);          
            return this;            
        },

In this addOne function, The models are logging out on console if i use $el.html(), but models are not visible on the view; (on the browser)

        addOne:function(todoItem)
        {       
                var todoView=new TodoView({model:todoItem});
                this.$el.append(todoView.render().$el.html());
        },
        initialize:function()
        {
            this.collection.on('change',this.addOne,this);
            this.collection.on('add',this.addOne,this);
        }
    });

    var todoListView=new TodoListView({collection:todoList});
    todoListView.render();
    console.log(todoListView.el);

Upvotes: 0

Views: 1179

Answers (0)

Related Questions