Question

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

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

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

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

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

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

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

Answer 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

Answer 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

如果您正在使用余烬数据，请在该示例的操作中说出item.get（＆＃39; good＆＃39;）。

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

2 个答案: