ember.js選中所有復選框

Question

嗨，我正在學習余燼，並被復選框卡住了。

這是我的模板（部分）：

<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'),

})

請注意，以上示例僅適用於選中所有復選框。 它不會取消選中它們。 它非常基本，僅用來說明所有工作原理背后的想法。

您可能想要閱讀復選框 ，然后檢查Ember TodoMVC的部分，其中提到來回切換所有待辦事項。

Answer 2

好的，感謝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}}\n{{#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'),
....