骨干嵌套视图

Question

我正在尝试制作嵌套视图。 Backendview调用ListPostView和ListPostView调用SinglePostView。 ListPostview和SinglePostView以集合的形式递归创建列表。

BackendView仅用于将页面包装在页面html中。 传递给BackendView的集合通过fetch和方法重置来检索。 问题是我无法渲染我的集合，并且在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;

 });