javascript - ember.js 检查所有复选框

Question

嗨，我正在学习 ember，并被复选框困住了。

这是我的模板(部分):

<table>
                    <thead>
                    <tr>
                        <th class="cell-delete">
                            {{input type="checkbox" id=colorId name=colorId class="js-custom-checkbox" checked=allChecked}}



                        </th>
                        <th class="cell-star">
                            &nbsp;
                        </th>
                        <th class="cell-broadcaster">Author</th>
                        <th class="cell-title">Title</th>
                        <th class="cell-date">Date</th>
                    </tr>
                    </thead>
                    <tbody>

                    {{#each message in model.entities}}

                        <tr>
                            <td class="cell-delete">

                                {{input type="checkbox" id=trash name="trash[]"  tabindex= message.id class="js-custom-checkbox check1" }}

                            </td>
                            <td class="cell-star">
                                {{input type="checkbox" name=message.id tabindex=message.id class="starBox" }}

                            </td>
                            <td class="cell-broadcaster">
                                {{message.notification.autor.firstName}} {{message.notification.autor.lastName}}
                            </td>
                            <td class="cell-title">
                                {{#link-to 'notifications.details' message.notification.id}}{{message.notification.title}}{{/link-to}} {{#unless message.isRead}} (new) {{/unless}}
                            </td>
                            <td class="cell-date">
                                {{formatDateWithDistance message.notification.cdate}}
                            </td>
                        </tr>

                    {{/each}}

                    </tbody>
                </table>

我的问题是如何启用操作来检查此模板中的所有复选框？

此数据以路由器形式 json api 获取:

export default Ember.Route.extend(AuthenticatedRouteMixin, {

model: function() {
    return  $.getJSON(ENV.apiHost + "/api/notificationdata/user/all");

},
.....

Answer 1

如果您确实有兴趣更改模型上的数据，则需要将复选框连接到某些东西。现在，它们似乎会显示，您可以选中和取消选中它们，但除了更改计算机上几个像素的颜色之外，它实际上不会执行任何操作。

对于复选框，您需要将它们连接到当前 Controller 中的值。您可以通过在该 Controller 中设置一个 bool 值并将其绑定(bind)到复选框的 checked 属性来实现此目的。如果 Controller 中的该值称为 allChecked，它可能如下所示:

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

完成后，您可以将最后一个复选框连接到 Controller 属性，该属性将触发 Controller 将与复选框关联的所有值更改为 true。

这里确实没有足够的上下文来给您一个可以立即插入并使其工作的答案。但你的 Controller 可能看起来像这样:

...Ember.Controller.extend({

  allChecked: null,
  allCheckedWatcher: function(){
    if(this.get('allChecked') === true){
      // function to set all the other properties to true
    }
  }.observes('allChecked'),

})

请注意，上面的示例仅适用于选中所有复选框。它不会取消选中它们。它非常初级，只是为了说明其工作原理。

您可能想要read up on checkboxes ，然后查看 Ember TodoMVC 中提到 toggling all todos 的部分来回。