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

如果您真的对更改模型中的数据感兴趣，则需要将复选框与某些东西挂钩。现在，它们似乎会显示，您可以选中和取消选中它们，但除了更改计算机上几个像素的颜色外，它实际上不会做任何事情。

对于复选框，您需要将它们连接到当前控制器中的值。为此，您可以在该控制器中设置一个布尔值，并将其绑定到复选框的 checked 属性。如果控制器中的那个值被称为 allChecked 它可能看起来像这样：

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

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

这里确实没有足够的上下文来给你一个你可以立即插入并让它工作的答案。但是您的控制器可能看起来像这样：

...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, then check out the part of the Ember TodoMVC where they mention toggling all todos 来回。

Answer 2

好的，感谢 Don 的提示，我已经设法做到了，所以我将我的代码发布给其他人：

第一个模板：

-复选框到 selece/deselect 所有：

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

复选框列表：


{{#each message in model.entities}}
 {{input type="checkbox" id=trash name="trash[]" checked=message.isDrop  tabindex= message.id class="check1" }}

 {{/each}}

我的路由器：

export default Ember.Route.extend(AuthenticatedRouteMixin, {

model: function() {

    return  $.getJSON(ENV.apiHost + "/api/forum/user/all");

},

afterModel: function(model) {

    model['entities'].setEach('isDrop', false);


},
...

还有我的控制器：

export default Ember.ObjectController.extend({
selected: false,

isDrop: false,

allChecked: null,
allCheckedWatcher: function(){
    var model = this.get('model');
    if(this.get('allChecked') === true){

        model['entities'].setEach('isDrop', true);
    } else {

        model['entities'].setEach('isDrop', false);
    }
}.observes('allChecked'),
....

ember.js 选中所有复选框

ember.js check all checkboxes

javascript

checkbox

ember.js