EmberJS - access properties of an object by arbitrary key in a template and have those properties bound using HTMLBars?

问题

With Handlebars I could do this:

<script type="text/x-handlebars" data-template-name="index">
  <table>
  {{#each model as |item index|}}
    <tr {{action 'update' index}}>
      {{#each col in columns}}
        <td>{{dd item col}}</td>
      {{/each}}
    </tr>
  {{/each}}
  </table>
</script>

App = Ember.Application.create();

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return [
      { name: "Joe", description: "Good guy", age: 15 },
      { name: "Moe", description: "Bad guy", age: 25 },
      { name: "Dude", description: "Some other guy", age: 65 }
    ];
  }
});

App.IndexController = Ember.ArrayController.extend({
  columns : ['age', 'name', 'description'],
  actions: {
    update: function(index) {
      var item = this.get('model')[index];
      Ember.set(item, 'age', 10);
    }
  }
});

Ember.Handlebars.registerBoundHelper('dd', function(item, column) {
  return item[column];
}, 'age', 'name', 'description');

This binds the age, name & description properties of each item in the model so that changing the age property updates the template.

However now that HTMLBars is the default I can't do this because it seems that makeBoundHelper doesn't have a dependentKeys parameters like HandleBars does. This helper renders the objects fine but doesn't update when the data changes:

App.ddHelper = Ember.HTMLBars.makeBoundHelper(function(params) {
  var item = params[0];
  var column = params[1];
  return item[column];
}, 'age', 'name', 'description');

Ember.HTMLBars._registerHelper('dd', App.ddHelper);

So how do I access properties of an object by arbitrary key in a template and have those properties bound using HTMLBars?

回答1:

I created a plugin that provides this functionality..

ember-get-helper

It's recently been adopted in the core Ember code so in upcoming versions you won't need to install the plugin anymore.. see this PR for details.

In regards to more advanced helpers that can recompute on things other than just the input to the helper, there is an open RFC to fix this. Keep an eye on it.

回答2:

I realized that this is a relatively good alternative:

<script type="text/x-handlebars" data-template-name="index">
  <table>
  {{#each model as |item index|}}
    <tr {{action 'update' index}}>
      {{#each col in columns}}
        <td>{{get-property model=item method=col}}</td>
      {{/each}}
    </tr>
  {{/each}}
  </table>
</script>

<script type="text/x-handlebars" data-template-name="components/get-property">
  {{value}}
</script>

App.getPropertyComponent = Ember.Component.extend({
    tagName: '',

    value: function() {
        var model = this.get('model');
        var method = this.get('method');

        return model[method].toString().toUpperCase();

    }.property('model.{age,name,description}')
});

来源：https://stackoverflow.com/questions/30676775/emberjs-access-properties-of-an-object-by-arbitrary-key-in-a-template-and-have

标签

javascript

ember.js