Question

我有一个调用子视图的骨干视图：

  lr.MapView = Backbone.View.extend({
    el: $('#map'),
    foo: "bar",
    initialize: function() {
      var that = this;
      _.bindAll(this, "render", "addAllEvents", "addOneEvent");
      this.collection = new lr.Events();
      this.collection.fetch({
        success:  function(resp) {
          that.render();
          that.addAllEvents();
        }
      });   
    },

    addAllEvents: function() {
      this.collection.each(this.addOneEvent);
    },

    addOneEvent: function(e) {
      var ev = new lr.EventView({ 
        model:  e
      });
    },

    render: function() {
    } 
  });

以下是子视图：

  lr.EventView = Backbone.View.extend({
    initialize: function() {
      _.bindAll(this, "render");
      console.log(lr.MapView.foo); // will console.log 'undefined' 
    },
    render: function() {
    }
  });

我希望能够在子视图中访问父视图的属性，但它不能使用上面的代码。例如，如何在子视图中访问'foo'变量？

Answer 1

lr.MapView是一个“类”，Backbone.View.extend构建的所有内容都位于lr.MapView.prototype，而不是lr.MapView。在打开控制台的情况下运行此命令，您将看到最新情况：

var MapView = Backbone.View.extend({ foo: 'bar' });
console.log(MapView);
console.log(MapView.prototype);
console.log(MapView.prototype.foo);

演示：http://jsfiddle.net/ambiguous/DnvR5/

如果你只有一个MapView，那么你可以在任何地方引用lr.MapView.prototype.foo：

initialize: function() {
  _.bindAll(this, "render");
  console.log(lr.MapView.prototype.foo);
}

请注意，无处不在包含在lr.MapView个实例中，因此您的foo将充当基于非原型的OO语言的“类变量”。

执行此操作的正确方法是使用foo的实例变量，并在创建子视图实例时将其传递给子视图实例：

// In MapView
addOneEvent: function(e) {
  var ev = new lr.EventView({
    model: e,
    parent: this
  });
}

// In EventView
initialize: function(options) {
  _.bindAll(this, "render");
  this.parent = options.parent; // Or use this.options.parent everywhere.
  console.log(this.parent.foo); 
}

或者更好的是，向MapView添加一个访问者方法：

_foo: 'bar',
foo: function() { return this._foo }

并在EventView中使用该方法：

initialize: function(options) {
    // ...
    console.log(this.parent.foo());
}

即使在JavaScript中，正确的封装和接口也是一个好主意。

Answer 2

只是一个猜测，但你可以在MapView中尝试这样的事情：

addOneEvent: function(e) {
    var that = this,
        ev = new lr.EventView({ 
            model:  e,
            parentView = that
        });
}

然后像这样访问它：

lr.EventView = Backbone.View.extend({
    initialize: function() {
      _.bindAll(this, "render");
      console.log(this.parentView.foo);
    },
    render: function() {
    }
  });

访问父骨干视图的属性

2 个答案: