Question

所以我认为我已经解决了这个问题，因为它只使用我的原型使用数组，但现在我实际上正在处理模型，我不确定它是否会起作用。如果我在控制器上创建一个属性，如下所示：

myAttributes: [{
  name: 'attr1',
  label: 'Attribute 1',
  value: null
}, {
  name: 'attr2',
  label: 'Attribute 2',
  value: 1
}]

然后我可以使用myAttributes遍历{{#each}}，因此虽然每个对象本质上都是一个字段，但它与单个模型上的字段不同，后者只有一个值，所以当只有一条记录时，我无法{{#each model as |rec|}}。

简而言之，我希望有一个按钮组来设置模型中每个字段的值，如下所示：

我有大约60个这样的字段，这就是为什么我想为每个字段使用{{#each}}和我的组件，但当然each遍历模型中的记录，而不是字段记录中。

这不可能吗？我是否只需要咬紧牙关并为每个字段写出标记，就像我只有几个字段一样？

更新：即使我可以遍历单个记录上的字段（可能是{{#each model.@each as |field|}}？），对于这种情况我还需要做的是将字段分成UI中的部分，例如循环第一部分中的字段1-10，以及下一部分中的11-20，并且似乎不是一个好方法。最后，我认为我最好只在每个字段上使用一个组件，如下所示：

{{attribute-component value=model.attr1}}
{{attribute-component value=model.attr2}}
.
.
.

Answer 1

有一个称为each-in的简洁助手，可以迭代对象的键/属性。

https://guides.emberjs.com/v2.6.0/templates/displaying-the-keys-in-an-object/

在你的情况下有一种方法可以做到这一点，但我认为实际上一种更简单的方法可以达到同样的效果：

template.hbs

{{#each myArrayOfPeople as | person | }}
    {{#each attribs as | anAttrib | }}
      {{get person (mut anAttrib)}},
    {{/each}}
    <br>
{{/each}}

component.js

attribKeys:['name', 'phoneNumber', 'otherAttrib'];

这将输出如下内容：

joe, 123, something,
sam, 456, anotherthing,
sarah, 944, foo

您可以使用相同的(mut anAttrib)帮助器将属性绑定到输入或您需要的任何内容。

{{attribute-component value=(mut anAttrib)}}

Answer 2

我现在已经放弃尝试迭代每个字段，因为我实际上需要根据其他标准将字段分解为手风琴容器，尽管@ averydev关于嵌套#的答案是一个非常酷的提示并且很有用。

我还更新到Ember 1.13以便使用{{#each}}帮助器（虽然我以前在组件上使用了一个操作，它将新值传递给控制器中的一个动作，它将值设置为模型属性。由于这是复杂的，使用mut的这种新方法更容易理解。

为了帮助将来的其他人，这里是我的代码（简化为SO，真正的代码与房间和家具无关）。我有一个自定义组件，它使用单选按钮组组件来实际设置值（这来自ember-radio-button）：

<强> template.hbs

mut

<强>模板/组件/间 - style.hbs

{{room-style title='Living Room' field=(mut model.livingRoomStyle)}}
{{room-style title='Master Bedroom' field=(mut model.masterStyle)}}

<强>部件/间 - style.js

<div class="btn-group" data-toggle="buttons">
  {{#radio-button value=1 groupValue=field classNames="btn btn-default" changed="changed"}}
    Modern
  {{/radio-button}}
  {{#radio-button value=2 groupValue=field classNames="btn btn-default" changed="changed"}}
    French
  {{/radio-button}}
  {{#radio-button value=3 groupValue=field classNames="btn btn-default" changed="changed"}}
    Rustic
  {{/radio-button}}
</div>

Ember.js：模型中的每个字段都可以有一个组件吗？

2 个答案: