Javascript 使用Ember动态创建输入（并检索其值）

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

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

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

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

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

但我不确定如何列举这些输入，以便我可以说：

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

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

---

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

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

{{{#model itemController=“thing”}中的每个项

{{item.color}
{{input type=“checkbox”checked=isChecked}

{{/每个}}

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

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

如果您使用的是一个ObjectController，它大概有一个数组，您可以在其中的每一个上循环

该值将自动绑定到每个模型的复选框状态。因此，只要你有一个关于模型的句柄，你就可以看到相应的检查

下面是一个使用普通JS对象的示例：

---

如果您使用的是余烬数据，则在该示例中的操作中应使用item.get（'good'）。

您可以使用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>

App.ApplicationController=Ember.ArrayController.extend({
内容：[
{姓名：“迈克尔”}，
{名称：“巴拉”}，
{name:“Velmurugan”}，
{名称：“拉贾”}
],
selectedContacts:Em.computed.filterBy（'content'，'isSelected'））
});

{{{#每个内容}

{{input type=“checkbox”checked=isSelected}{{name}}

{{/每个}}

选定联系人：

{{#每个选定联系人}
{{name}}
{{/每个}}

---

这里的示例

如果我理解正确，你是说如果我有很多复选框，比如

{{input type=“checkbox”checked=boxIsChecked}{input type=“checkbox”checked=boxIsChecked}{{input type=“checkbox”checked=boxIsChecked}

，那么我可以在

boxIsChecked[0]中得到它们的每个值，我添加了一个示例，您可能还需要一个itemController。你在使用余烬数据吗？我在使用余烬数据！这太棒了！问题，尽管。我添加了一个控制台日志，以便查看您创建的数组包含的内容：从打印输出中可以看到，我们得到的对象数组似乎不再设置“名称”属性。这是为什么？当我试图在我的用例中模拟这个例子时，在一个复选框上检查所有复选框。我可能做错了什么？