lundi 20 avril 2015

replace deprecated Ember.ObjectController used in View in ember.js

I am using Ember.js to create a one page map editing software. In my app, I use a model to represent the layer's state of the map and to associate it with an actual openlayers' layer.

There is a summary of my work:

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

{{view "mapLayers"}}

Here is the mapLayers view definition:

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

The 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 see, I am using the proxy ObjectController to modify on the fly the values set and get in the view.

I'm trying to understand how to remove the ObjectController without success.

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

I read this without help:

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.




Aucun commentaire:

Enregistrer un commentaire