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 是控制器的实例，而不是视图＆＃39; s实例

我很确定我在应用程序的设计中做错了什么。我想分开关注点并将绘图部分放在主控制器之外。我应该使用组件吗？不确定，因为它不可重复使用......

我希望在这里有一些指示。

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
- 地图draw.js
模板
- map.hbs
- 地图draw.hbs
的观点
- map.js
- 地图draw.js

模板 templates / map.js 中的

我使用这样的渲染助手：

{{render "mapDraw" mapDraw}}

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

视图内容 map-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'));
    });
  }
  //...//
});

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

2 个答案: