EmberJS - 通过模板中的任意键访问对象的属性，并使用HTMLBars绑定这些属性？ [英] EmberJS - access properties of an object by arbitrary key in a template and have those properties bound using HTMLBars?

问题描述

 < script type =text / x-handlebarsdata-template- NAME = 索引 > 
< 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男人，年龄：15}，
 {名称：Moe，描述：坏人，年龄：25}，
 {名称：Dude，描述：其他一些人年龄：65} 
]; 
} 
}）; 
 
 App.IndexController = Ember.ArrayController.extend（{
 columns：['age'，'name'，'description']，
 actions：{
更新：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'描述'）; 
  

这将绑定年龄，名称&模型中每个项目的描述属性，以便更改age属性更新模板。

但是现在HTMLBars是默认值，因为似乎这样做makeBoundHelper没有像HandleBars这样的dependentKeys参数。这个帮助程序使对象正常，但数据更改时不会更新：

  App.ddHelper = Ember.HTMLBars.makeBoundHelper function（params）{
 var item = params [0]; 
 var column = params [1]; 
 return item [column]; 
}，'age'名称'，'描述'）; 
 
 Ember.HTMLBars._registerHelper（'dd'，App.ddHelper）; 
  

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

解决方案

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

ember-get-helper

最近在核心Ember代码中被采用，所以在即将到来的版本中，您将不再需要安装该插件。请参阅这个PR 的详细信息。

关于更高级的帮助者，可以重新计算除了输入到帮助者，有一个打开RFC 解决这个问题。留意。

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?

解决方案

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.

这篇关于EmberJS - 通过模板中的任意键访问对象的属性，并使用HTMLBars绑定这些属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！