jeudi 28 mai 2015

When to use controllers when using components with Ember

In the latest (1.10+) versions of Ember there seems to be a trend to make use of components instead of controllers and views.

The wisdom seems to be: "Only use controllers at the top-level for receiving data from the route, and use Ember.Controller instead of Ember.ArrayController or Ember.ObjectController"

This makes some sense to me as it's cool to create reusable components, but there are some scenarios where it is unclear to me what the appropriate approach is.

Say we have a component which represents a row in a table, something like this:

# entry-row.js component
import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'tr',

  actions: {
    toggleResolving: function() {
      this.toggleProperty('resolving');
    }
  },

  isChecked: function() {
    return this.get('resolving');
  }.property('resolving')
});

# entry-row.hbs template
<td {{action "toggleResolving"}}>{{entry.name}}</td>
<td>{{entry.currency.symbol}}{{entry.amount}}</td>
<td>{{entry.date}}</td>
<td class="bs-checkbox">{{input type="checkbox" checked=isChecked class="toggle"}}</td>

To form a table, many of the same component are used. That's great. If there is some non-persistent state which applies only to that row then that can belong to the component and be changed there. Something like:

actions: {
    toggleResolving: function() {
      this.toggleProperty('resolving');
    }
  }

But say that my resolving property is also useful outside the component. In this case, I wish to be able to mark several rows for resolution and then perform some action on them collectively. I believe that before the switch to components, I would have defined the resolving property on the Controller and made use of that controller wherever I needed the model + state.

Should I still be putting this on the controller?




Aucun commentaire:

Enregistrer un commentaire