Question

我目前正在尝试在Backbone.js Views中实现继承。我有许多不同模型的集合，我喜欢使用jQuery UI Accordion小部件显示。对于每个模型，我有一个对应于手风琴面板的视图，对于每个相关的集合，我有一个与手风琴本身相对应的视图，并将每个组成模型呈现为一个面板。我没有为多个不同的模型/集合重复编写相同的视图代码，而是决定抽象出常见的手风琴行为。我跟着this well-written answer作为我的代码的蓝图。我目前的代码如下：

手风琴view.js

(function($) {
  $.dashboard.AccordionView = Backbone.View.extend({

    initialize: function() {
      _.bindAll(this, 'render', 'addModel', 'refresh');
      this.collection.each(function(model) {
        model.on('refreshAccordion', this.refresh);
      }, this);
      this.collection.on('add', this.addModel);
    },

    refresh: function() {
      this.$el.accordion('destroy').accordion({heightStyle: 'content'});
    },

    addModel: function(model) {
      this.renderModel(model);
      model.on('refreshAccordion', this.refresh);
      this.refresh();
    },

    render: function() {
      this.collection.each(function(model) {
        this.renderModel(model);
      }, this);
      console.log(this.$el);
      this.$el.accordion({heightStyle: 'content'});
      return this;
    }
  });
})(jQuery);

接入点收集-view.js

(function($) {
  $.dashboard.AccessPointCollectionView = $.dashboard.AccordionView.extend({
    el: "ul#access_points",

    initialize: function(options) {
      this.constructor.__super__.initialize.apply(this, [options]);
      _.bind(this.renderModel, this);
    },

    renderModel: function(model) {
      var accessPointView = new $.dashboard.AccessPointView({
        model: model
      });
      console.log(this);
      console.log(this.el);
      console.log(this.$el);
      this.$el.append(accessPointView.render().el);
      $(".button").button();
    }
  });
})(jQuery);

当我在console.log(this)函数中调用renderModel时，这就是我在Developer Tools控制台中看到的内容：

d
  $el: jQuery.fn.jQuery.init[0]
    context: HTMLDocument
    length: 0
    prevObject: jQuery.fn.jQuery.init[1]
    selector: "ul#access_points"
  addModel: function () { [native code] }
  cid: "view61"
  collection: g.Collection
  el: undefined
  options: Object
  refresh: function () { [native code] }
  render: function () { [native code] }
  __proto__: x
    constructor: function (){a.apply(this,arguments)}
    el: "ul#access_points"
    initialize: function (options) {
    renderModel: function (model) {
    __proto__: x

当我致电console.log(this.el)时，我得到undefined，当我致电console.log(this.$el)时，我得到[]。

显然这不是预期的行为。为什么没有在原型链中找到正确的el（“ul＃access_points”）？为什么即使知道正确的选择器也没有定义$ el？

请记住，我是基于类的OOP背景，并且对基于原型的JavaScript的OOP系统非常不熟悉，所以如果有的话，请慢点解释任何与原型相关的细微差别。

Backbone.View继承 - 奇怪的$ el / el行为

0 个答案: