使用Ember动态创建输入（并检索其值） [英] Dynamically Create Inputs with Ember (and retrieve their values)

问题描述

我在Ember.JS的前端工作，需要能够创建x个输入复选框取决于我的模型。基本上我想做类似的事情：

I'm working with Ember.JS on the front-end and need to be able to create x number of input checkboxes depending on my model. Basically I want to do something like:

{{#each model}}
    {{input type="checkbox"}}
{{/each}}

不知道如何我提取后可以从控制器检索x复选框的值。如果只是一个，我可以说：

While that works perfectly fine, I'm not sure how I can retrieve the values of x checkboxes from the controller upon submission. If it were just one, I might say:

{{input type="checkbox" checked=boxIsChecked}}

但我不知道如何枚举这些输入，所以我可以这样说：

But I'm not sure how I can enumerate these inputs so that I might say:

{{input type="checkbox" checked=boxOneIsChecked}}

理想情况下，我希望能够将检查的值检索到数组中。这是可能吗？还是有一个优秀的解决方案，我忽略？谢谢！

Ideally, I'd like to be able to be able to retrieve the checked values into an array. Is any of this possible? Or is there a superior solution I'm overlooking? Thanks!

推荐答案

每个复选框都应该绑定到模型上（或控制器）。

Each checkbox should be bound to something on the model (or the controller).

{{#each item in model itemController="thing"}} 
                 <!-- ^ this will look for a controller named ThingController -->
  <li>
    {{item.color}}
    {{input type="checkbox" checked=isChecked}}
                          <!--      ^ each Thing model should have an isChecked boolean
                                      or the ThingController can have it -->
  </li>
{{/each}}

$ b $ p

假设您使用的是ArrayController，

Assuming you are using an ArrayController the checkboxes would be some boolean on each of the models for the ArrayController.

如果你使用的ObjectController假定有一个数组的东西，你可以循环其中的每一个。

If you are using an ObjectController presumably that has an array of things and you can loop over each of those.

该值将自动绑定到每个模型的复选框的状态。

The value will automatically be bound to the state of the checkbox for each model. So as long as you have a handle on the models you can see the corresponding checks.

下面是一个使用纯JS对象的例子： http://jsbin.com/dubewuxa/4/edit?html,js,console,output

Here is an example using plain JS objects: http://jsbin.com/dubewuxa/4/edit?html,js,console,output

如果您使用ember-data，您可以在该示例的操作中说item.get（'good'）。

If you're using ember-data you'd say item.get('good') in the action from that example.

这篇关于使用Ember动态创建输入（并检索其值）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！