嵌套的视图主干

Nested view backbone

本文关键字:视图 嵌套      更新时间:2023-09-26

我正在尝试创建一个嵌套视图。Backendview调用另一个视图Listpostview,但不起作用。我在一个嵌套视图Liastpostview中插入了一个console.log,看看它是否被调用,但从未打印出来。

以下外部视图代码:

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;
});

这是上面视图调用的ListPostView的代码:

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;
 });  

最后是上面最后一个视图调用的视图代码:

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;
 });

BackendView渲染方法中调用render后,它看起来不像是在使用list变量。

我看到调用了list.render(),但没有在DOM中的任何位置插入list.$el元素。我要测试的第一件事是从BackendView中的渲染方法调用this.$el.append(list.$el)