Javascript 主干嵌套视图

我正在尝试创建嵌套视图。Backendview调用ListPostView，ListPostView调用SinglePostView。ListPostview和SinglePostView通过集合递归创建列表

BackendView仅用于将列表包装到html页面中。 通过fetch和reset方法检索传递给BackendView的集合。 问题是我无法呈现我的集合，并且在SinglePostView中错误为“未定义”。 如果我直接调用ListPostView，它工作得非常好。 我认为这可能取决于初始化函数中的事件“bind”

这是我的收藏：

var Attori = Backbone.Collection.extend({


model:Attore,
idAttribute: "id",


fetch: function(options) {
var collection = this; 
var cb = new Codebird;
cb.setConsumerKey("1Cx*mfA", "YedD*4s");


cb.__call(
"oauth2_token",
{},
function (reply) {
  var bearer_token = reply.access_token;
  console.log(bearer_token);

     cb.setBearerToken(bearer_token);
}


);
console.log(options);
cb.setToken("259**g4ONJYi2","z8LLm52M**PS");

var params = {
q: "jim carrey"
//screen_name:"brad"
};


cb.__call(
"users/search",
params,
function (reply) {
   console.log(reply);
   collection.reset(reply);
 }
 );



}

});


return Attori;

});

这是Backendview：

  var BackendView = Backbone.View.extend({

    tagName: "ul",
    id: "list",
    events: {
      "touchend": "goToDetails"
    },

    template: Handlebars.compile(template),

    initialize: function () {

    this.collection.bind("reset", this.render, this);
    },

    render: function (eventName) {


   console.log(this.collection.length);

    /* _.each(this.collection.models, function (ad) {
        $(this.el).append(new ListPostView({
          collection: ad
        }).render().el);
      }, this);*/


  /* $(this.el).append(new ListPostView({
          collection: this.collection
        }).render().el);*/




 if (typeof this.collection !== 'undefined' && this.collection.length > 0) {
// the array is defined and has at least one element
 var List=new ListPostView({collection:this.collection}); 
 //List.render();

   }







 //console.log(List);

      return this;
    },

    goToDetails: function () {
      Parse.history.navigate("ads/" + this.model.cid, {trigger: true});
    }
  });

return BackendView;

 });

这是ListpostView：

var ListPostView = Backbone.View.extend({

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

    template: Handlebars.compile(template),

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

    render: function (eventName) {
    console.log(this.collection.models);
      $(this.el).empty();
      _.each(this.collection.models, function (a) {
        $(this.el).append(new SinglePostView({
          model: a
        }).render().el);
      }, this);

      return this;


    }
  });

return ListPostView;

  });  

这是SinglePostView：

var SinglePostView = Backbone.View.extend({

    tagName: "li",

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

    template: Handlebars.compile(template),

    initialize: function () {
         console.log(this.model);
      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));


      return this;
    },

    goToDetails: function () {
      Parse.history.navigate("ads/" + this.model.cid, {trigger: true});
    }
  });

return SinglePostView;

 });

---

顺便说一句，使用更好的。谢谢，但我会尽力理解