Replace the deprecated Ember.ObjectController used in the view in ember.js

I am using Ember.js to build single page editing software. In my application, I am using a model to represent the state of a layer in the map and link it to the real layer of open layers.

There is a summary of my work:

at my entry point map.hbs , I call the view mapLayers:

{{view "mapLayers"}}

      

Here is the definition of the mapLayers view:

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

      

MapLayers template:

<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>

      

And the 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')
});

      

As you can see, I am using a proxy ObjectController to change set values ​​on the fly and get them in the view.

I am trying to figure out how to delete ObjectController without success.

I tried to go to Ember.Controller, but how can I proxy my model properties, then?

I read this without any help:

OBJECTCONTROLLER

Experienced Ember users have enjoyed using proxy behavior in the Ember.ObjectController class since 1.0. However, this behavior will be removed in Ember 2.0 as the framework is carried over into routable components.

New users fall into three road albums when they explore the Controller Template object.

Given a specific model, which of the three controller parameters should I use? Which controller is generated by the framework if I don't specify one? When using an object controller, why isn't the context passed to actions if it has properties on my model? For these reasons, object controllers are listed in the Road to Ember 2.0 RFC as a concept that should be removed from the scope.

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({
// ...

      

The next update is for any use of {{modelPropertyName}} in templates with {{Model.modelPropertyName}}. You should also look at any property-specific computed keys, observer keys, and get and set commands on the route and controller.

+3


source to share


1 answer


Instead of proxying you just need to fully qualify, you get the property from the model, not the controller, which is in scope in your template and controller.

Template

<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')
});

      

+2


source







All Articles