使用 Ember 动态创建输入（并检索它们的值）答案

【问题标题】：Dynamically Create Inputs with Ember (and retrieve their values)使用 Ember 动态创建输入（并检索它们的值）
【发布时间】：2014-08-03 04:52:07
【问题描述】：

我在前端使用 Ember.JS，需要能够根据我的模型创建 x 个输入复选框。基本上我想做这样的事情：

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

虽然效果很好，但我不确定如何在提交时从控制器中检索 x 复选框的值。如果只是一个，我可能会说：

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

但我不确定如何枚举这些输入，因此我可能会说：

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

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

【问题讨论】：

标签： javascript checkbox input ember.js controller

【解决方案1】：

您可以使用 Em.computed.filterBy 来获取选定的对象值。

App.ApplicationController = Ember.ArrayController.extend({
  content: [
      { name: "Michael" },
      { name: "Bala" },
      { name: "Velmurugan" },
      { name: "raja" }
  ],
  selectedContacts: Em.computed.filterBy('content','isSelected')
});

<script type="text/x-handlebars" id="application">
    <ul class="list-unstyled">
    {{#each content}}
        <li>
        <div class="checkbox">
            <label>
              {{input type="checkbox" checked=isSelected}} {{name}}
            </label>
          </div>
        </li>
    {{/each}}
    <ul>
    Selected Contacts:
   <ul>
    {{#each selectedContacts}}
        <li>  {{name}}</li>
    {{/each}}
    <ul>

 </script>

这里是fiddle示例

【讨论】：

这太棒了！问题，不过。我添加了一个控制台日志，这样我就可以看到您创建的数组包含的内容：jsfiddle.net/z43Xq/2 从打印输出中可以看到，我们得到的对象数组似乎不再设置它们的“名称”属性。这是为什么呢？
当我尝试在我的用例中模拟此示例时，检查一个检查所有框..我做错了什么？

【解决方案2】：

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

{{#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}}

假设您使用的是 ArrayController，则 ArrayController 的每个模型上的复选框都是布尔值。

如果你使用的 ObjectController 大概有一个数组，你可以循环遍历其中的每一个。

该值将自动绑定到每个模型的复选框状态。所以只要你掌握了模型，就可以看到相应的检查。

这是一个使用普通 JS 对象的示例：http://jsbin.com/dubewuxa/4/edit?html,js,console,output

如果您使用的是 ember-data，您会在该示例的操作中说 item.get('good')。

【讨论】：

如果我理解正确，你是说如果我有很多复选框，例如{{input type="checkbox" checked=boxIsChecked}} {{input type="checkbox" checked=boxIsChecked}} {{input type="checkbox" checked=boxIsChecked}}，那么我可以从控制器获取它们在boxIsChecked[0] 等处的每个值？
我添加了一个示例，您可能还需要一个 itemController。你在使用 ember-data 吗？
我正在使用 ember-data！