Nested view backbone

Question

I'm try to do a nested view. Backendview call another view Listpostview but doesn't work.I've inserted a console.log in a a nested view Liastpostview to see if it's called but it's never printed.

Below code of external view:

var BackendView = Backbone.View.extend({

    tagName: "p",

    events: {
      "touchend": "goToDetails"
    },

    template: Handlebars.compile(template),

    initialize: function () {

      this.model.bind("change", this.render, this);
      this.model.bind("destroy", this.close, this);
    },

    render: function (eventName) {


    console.log(this.model);


    var list=new ListPostView({model:this.model});
    list.render();

      return this;
    },


  });

return BackendView;

});

This is code of ListPostView called by view above:

var ListPostView = Backbone.View.extend({

    tagName: "ul",
    id: "list",

    template: Handlebars.compile(template),

    initialize: function () {
        console.log(this.model);
      this.model.bind("reset", this.render, this);
    },

    render: function (eventName) {
    console.log("dddd"+this.model);<---this console.log will never called!?
      $(this.el).empty();
      _.each(this.model.models, function (ad) {
        $(this.el).append(new SinglePostView({
          model: ad
        }).render().el);
      }, this);
      return this;
    }
  });

return ListPostView;

 });  

and finally code of view called by last view above:

var SinglePostView = Backbone.View.extend({

    tagName: "li",

    events: {
      "touchend": "goToDetails"
    },

    template: Handlebars.compile(template),

    initialize: function () {
        //console.log(ad);
      this.model.bind("change", this.render, this);
      this.model.bind("destroy", this.close, this);
    },

    render: function (eventName) {
      var ad = this.model.toJSON();
      ad.cid = this.model.cid;
      $(this.el).html(this.template(ad));
      console.log(this.template(ad));

      return this;
    },


  });

return SinglePostView;

 });

Answer 1

It doesn't look like you're using the list variable in your BackendView render method after calling render on it.

I see that list.render() is called but that doesn't insert the list.$el element in the DOM anywhere. The first thing I would test is from your render method in BackendView call this.$el.append(list.$el)