余烬.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属性被实例化。

除了onMapCreated函数中引用的this是控制器的实例而不是视图的实例之外，上面的代码是可以工作的。

我确信我在应用程序的设计中做错了什么。我想将这些问题分开，并将绘图部分放在主控制器之外。我应该使用组件吗？不确定，因为它不会重复使用。。。

我很想知道这里的方向。

Answer 1

在阅读了API部分中的手册之后，我提出了解决方案。我把它贴在这里是因为有一天有人需要它。实际上，我所要做的就是在addObserver方法中添加一个参数this，以便更改上下文。

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数据：1.0.0-beta.16

jQuery：1.11.2

目录结构：

• 控制器：
  • map.js
  • map-draw.js
• 模板
  • 地图.hbs
  • map-draw.hbs
• 视图
  • map.js
  • map-draw.js

在模板templates/map.js中，我使用了一个类似于以下的渲染助手：

{{render "mapDraw" mapDraw}}

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

视图的内容地图绘制.js：

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

在控制器中，我正在绑定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'));
    });
  }
  //...//
});