嵌套视图主干

时间:2014-04-19 12:13:42

标签: javascript android jquery backbone.js mobile

我尝试做一个嵌套视图。 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;

 });

1 个答案:

答案 0 :(得分:1)

在调用render之后,您的list渲染方法中的BackendView变量看起来并不像。

我看到list.render()已被调用,但不会在任何地方将list.$el元素插入到DOM中。我要测试的第一件事是来自BackendView调用this.$el.append(list.$el)

中的渲染方法