ember.js选中所有复选框

ember.js check all checkboxes

本文关键字：复选框 js ember      更新时间：2024-06-10

嗨，我正在学习成员，却被复选框卡住了。

这是我的模板（部分）：

<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");
},
.....

如果您真的对更改模型上的数据感兴趣，您需要将复选框与某些内容挂钩。现在，它们似乎会显示，你可以选中和取消选中它们，但除了改变电脑上几个像素的颜色之外，它实际上什么都不会做。

使用复选框，您需要将它们与当前控制器中的值挂钩。您可以通过在该控制器中设置布尔值，并将其绑定到复选框的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'),
})

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

你可能想看看复选框，然后看看Ember TodoMVC中提到来回切换所有todo的部分。

好吧，多亏了Don的提示，我成功做到了，所以我为其他人发布了我的代码：

第一个模板：

-复选框选择/取消选择所有：

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

My router: 

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'),
....
相关文章：