ember.js - 替换 ember.js 中 View 中已弃用的 Ember.ObjectController

Question

我正在使用 Ember.js 创建一个单页 map 编辑软件。在我的应用程序中，我使用模型来表示 map 的图层状态并将其与实际的 openlayers 图层关联。

我的工作总结:

在我的入口点ma​​p.hbs中，我调用mapLayers View :

{{view "mapLayers"}}

这是mapLayers View 定义:

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

mapLayers 模板:

<ul>
  {{#each layer in tileLayers itemController="mapLayer"}}
      <li {{bind-attr id=layer.identifier}}>
          <a>
              <label class="hint--top" {{bind-attr data-hint=layer.title}}>
                {{str-sub layer.title 20}}
              </label>
            {{input class="range" type="range" name="range" min="0" max="100" value=layer.opacity}}
          </a>
      </li>
  {{/each}}
</ul>

和mapLayer Controller :

export default Ember.ObjectController.extend({

  opacity: function(key, value){
    var model = this.get('model');

    if (value === undefined) {
      // property being used as a getter
      console.log("get layer opacity: " + model.get('opacity'));
      return model.get('opacity') * 100;
    } else {
      // property being used as a setter
      model.set('opacity', value / 100);
      model.get('layer').setOpacity(value / 100);
      model.save();
      return value;
    }
  }.property('model.opacity')
});

如您所见，我使用代理 ObjectController 来动态修改设置的值并获取 View 中的值。

我试图了解如何删除 ObjectController 但没有成功。

我尝试更改为 Ember.Controller 但如何代理我的模型属性？

我在没有帮助的情况下阅读了这篇文章:

OBJECTCONTROLLER

Experienced Ember users have enjoyed the use of proxying behavior in the Ember.ObjectController class since 1.0. However, this behavior will be removed in Ember 2.0 as the framework migrates to routable components.

New users hit three roadbumps when learning about the object controller pattern.

Given a certain model, which of the three controller options should I be using? Which controller is generated by the framework if I do not specify one? When using an object controller, why should the this context not be passed to actions if it has the properties of my model? For these reasons, the Road to Ember 2.0 RFC listed object controllers as a concept to be removed from the framework.

To migrate from an explicitly defined object controller, first convert the class definition to inherit from Ember.Controller. For example:

import Ember from "ember";

// Change: export default Ember.ObjectController.extend({ // To:
export default Ember.Controller.extend({
// ...

Next update any use of {{modelPropertyName}} in templates with {{model.modelPropertyName}}. You should also review any computed property dependent keys, observer keys, and get and set statements on the route and controller.

Answer 1

不需要代理，您只需完全限定您从模型而不是 Controller 中获取属性，这就是模板和 Controller 范围内的内容。

模板

<ul>
  {{#each layer in tileLayers itemController="mapLayer"}}
      <li id={{layer.model.identifier}}>
          <a>
              <label class="hint--top" data-hint={{layer.model.title}}>
                {{str-sub layer.model.title 20}}
              </label>
            {{input class="range" type="range" name="range" min="0" max="100" value=layer.opacity}}
          </a>
      </li>
  {{/each}}
</ul>

Controller

export default Ember.Controller.extend({

  opacity: function(key, value){
    var model = this.get('model');

    if (value === undefined) {
      // property being used as a getter
      console.log("get layer opacity: " + model.get('opacity'));
      return model.get('opacity') * 100;
    } else {
      // property being used as a setter
      model.set('opacity', value / 100);
      model.get('layer').setOpacity(value / 100);
      model.save();
      return value;
    }
  }.property('model.opacity')
});