ember.js 有视图的功能观察控制器的 属性

Question

我写了一个观点：

export default Ember.View.extend({
  select: null,
  modify: null,

  createSelect: function() {
    return new ol.interaction.Select();
  },

  onMapCreated: function() {
    this.select = this.createSelect();
    this.modify = this.createModify();
  },

  init: function() {
    this._super();
    this.get('controller').addObserver('olMap', this.onMapCreated);
  },
});

该视图已添加到与具有 olMap 属性 的控制器相关的模板中。 我需要等待 olMap 属性 在我看来做一些工作之前实例化。

上面的代码有点工作，除了 this 在 onMapCreated 函数中引用的是控制器的实例而不是视图的实例实例.

我很确定我的应用程序设计有问题。我想分开关注点并在主控制器之外获取 drawing 部分。我应该使用组件吗？不确定，因为它不会被重复使用...

我很想在这里得到一些指示。

Answer 1

阅读API部分的手册后，我想出了解决办法。我 post 总有一天会有人需要它。实际上，我所要做的就是将参数 this 添加到 addObserver 方法以更改上下文。

export default Ember.View.extend({
  select: null,
  modify: null,

  createSelect: function() {
    return new ol.interaction.Select();
  },

  onMapCreated: function() {
    this.select = this.createSelect();
    this.modify = this.createModify();
  },

  init: function() {
    this._super();
    this.get('controller').addObserver('olMap', this, this.onMapCreated);
  },
});

Answer 2

这是我最终得到的结果：

我的设置：

Ember : 1.10.0

Ember Data : 1.0.0-beta.16

jQuery : 1.11.2

目录结构：

• 控制器：
  • map.js
  • 地图-draw.js
• 模板
  • map.hbs
  • 地图-draw.hbs
• 观看次数
  • map.js
  • 地图-draw.js

在模板中 templates/map.js 我使用这样的渲染助手：

{{render "mapDraw" mapDraw}}

渲染器使用控制器controllers/map-draw.js和视图views/map-draw.js

视图内容地图-draw.js:

export default Ember.View.extend({
  templateName: "mapDraw",
  classNames: ["map-draw"]
});

在控制器中 map-draw.js 我正在绑定 map.js 控制器。

export default Ember.Controller.extend({    
  needs: ['map'],
  olMap: null,
  //...//
  init: function() {
    this._super();
    this.get('controllers.map').addObserver('olMap', this, function(sender) {
      this.set('olMap', sender.get('olMap'));
    });
  }
  //...//
});