Question

使用Handlebars，我可以这样做：

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

这会影响年龄，姓名和时间。描述模型中每个项目的属性，以便更改age属性更新模板。

但是现在HTMLBars是默认的，我不能这样做，因为似乎makeBoundHelper没有像HandleBars这样的dependentKeys参数。这个帮助器可以很好地渲染对象，但在数据发生变化时不会更新：

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

那么如何通过模板中的任意键访问对象的属性并使用HTMLBars绑定这些属性？

Answer 1

我创建了一个提供此功能的插件..

ember-get-helper

最近在核心Ember代码中采用了它，因此在即将推出的版本中，您不再需要安装该插件..有关详细信息，请参阅this PR。

对于可以重新计算除助手输入之外的事情的更高级的助手，有一个open RFC来解决这个问题。留意它。

Answer 2

我意识到这是一个相对不错的选择：

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

EmberJS - 通过模板中的任意键访问对象的属性，并使用HTMLBars绑定这些属性？

2 个答案: