Ember 中 HTMLBars Helper 的动态绑定属性

Question

我有一个属性名称列表 attrs，我想对其进行迭代，为每个属性创建一个绑定到模型上该属性的输入。下面表达了我所追求的功能：

{{#each attr in attrs}}
  {{input value=model.get(attr) }}
{{/each}}

当然这实际上不起作用，因为您不能在助手中进行方法调用。我找到了 this question, but the solution doesn't work in my version of Ember (1.11.0)-- I gather because this is undefined in a helper definition as of version 1.11.0 (see here).

我怎样才能使这个工作？

Answer 1

如果您只想从模型中获取一个属性，以每个循环的当前值命名，您可以编写如下帮助程序：

Ember.Handlebars.helper('input-helper',
    function(model, attr) {
        return Ember.get(model, attr);
    }
);

然后像这样使用它：

{{#each attr in attrs}}
    {{input-helper model attr}} 
{{/each}}

这将打印属性命名为 attr 在 #each 迭代中从 model

中保留的任何内容

如果您想将该值绑定到一个输入，而不是制作一个助手，您可以制作一个组件或一个视图来为您做这件事：

// component that binds 'object.property' to an input field
var InputBinderComponent = Ember.Component.extend({
  prop: null, // passed in
  obj: null,   // passed in
  value: null,    // local

  onValue: function() {
    var obj = this.get('obj');
    var prop = this.get('prop');
    var value = this.get('value');
    Ember.set(obj, prop, value);
  }.observes('value'),
});

使用 input-binder 组件的模板实际包含输入：

{{input type="text" value=value}}

然后在模板中使用：

{{#each attr in attrs}}
      {{input-binder prop=attr obj=model}}
{{/each}}

Ember 中 HTMLBars Helper 的动态绑定属性

Dynamic bound property for an HTMLBars Helper in Ember

javascript

ember.js

htmlbars

Here is an Example

Ember 中 HTMLBars Helper 的动态绑定 属性

Dynamic bound property for an HTMLBars Helper in Ember

javascript

ember.js

htmlbars

Here is an Example

Ember 中 HTMLBars Helper 的动态绑定属性