6

我正在尝试编写一个通用视图来处理我的应用程序中的自定义字段，但我很难让它工作。这是场景 - 我有一个fieldDef定义自定义字段的对象，以及一个valueObject具有数组的对象customFields，它具有值。我想做的是这样的：

{{view Ember.TextField valueBinding="valueObject.customFields.[fieldDef.name]"}}

显然这不起作用，因为它被视为fieldDef.name文字。我尝试过覆盖 TextField 类，但似乎无法将其绑定。

关于如何做到这一点的任何建议？

谢谢，斯科特

4

3 回答 3

6

Ember 无法绑定到数组索引，因此您必须解决它。一种解决方案是将自己限制为单向绑定，您的文本字段会更新值哈希。如果您打算在用户按下按钮后提交表单，这应该可以解决问题。

在你的控制器中定义一个字段 id 的数组，并为它们的值定义一个哈希值。

App.ApplicationController = Ember.Controller.extend({
  fieldIds: ['name', 'email', 'whatever'],
  fieldValues: {} // {name: 'user', email: 'user@...', ...}
});

现在扩展Ember.TextField以在文本字段更改时更新您的值哈希。您需要从控制器传递每个实例 a 和对哈希fieldId的引用。values

App.TextField = Ember.TextField.extend({
  fieldId: null,
  values: null,

  valueChange: function() {
      var fieldId = this.get('fieldId');
      var values = this.get('values');
      if (values && fieldId) values[fieldId] = this.get('value');
  }.observes('value')
});

模板很简单。

{{#each fieldId in fieldIds}}
  <label>{{fieldId}}</label>
  {{view App.TextField fieldIdBinding="fieldId" valuesBinding="fieldValues"}}
  <br/>
{{/each}}

在这里，它在 jsfiddle 中得到了充实。

于 2013-03-01T23:48:32.027 回答
1

@ahmacleod 很好的答案。以防万一有人感兴趣，它也可以很好地扩展选择：

import Ember from 'ember';

export default Ember.Select.extend({
  fieldId: null,
  values: null,

  valueChange: function() {
    var fieldId = this.get('fieldId');
    var values = this.get('values');
    if (values && fieldId) values[fieldId] = this.get('value');
  }.observes('value')
});

将其称为普通组件（components/dynamic-select.js）

{{#each id in fieldIds}}
   {{dynamic-select content=fieldIds fieldIdBinding="header"       
     valuesBinding="fields"}}
{{/each}}
于 2015-02-12T22:13:03.177 回答
1

您现在可以在mut助手的帮助下将输入值与对象的动态键（变量）绑定。

https://guides.emberjs.com/v2.6.0/templates/input-helpers/#toc_binding-dynamic-attribute

你可以像这样访问它，

var Object = {};
var key = "firstName";

我们可以像这样在输入助手中绑定键，

{{input value=(mut (get Object key))}}

{{Object.firstName}} // Prints the dynamic value in textbox
于 2016-06-22T11:08:24.373 回答