Ember.js數組控制器計算屬性複選框

我有一個複選框，我想觸發一個簡單的「全選」功能。問題是，我無法弄清楚如何將複選框的操作連接到控制器中的操作，以便我可以實際更新記錄。Ember.js數組控制器計算屬性複選框

App.LanguagesController = Ember.ArrayController.extend({ 
    actions: { 
    toggleAllVisibility: function() { 
     var newVisibility = !this.get('allAreVisible'); 

     var needingVisibilityChange = this.filterBy('visible', !newVisibility); 
     needingVisibilityChange.setEach('visible', newVisibility); 
    } 
    }, 

    allAreVisible: function(param) { 
    return this.filterBy('visible', false).get('length') === 0; 
    }.property('@each.visible'), 
});

在我的模板，我已經輸入助手

{{input type='checkbox' checked=allAreVisible}}

當我手動（即如果所有的人都被選中，然後複選框更新）更改的元素這正常更新複選框以下，但當我切換複選框時，沒有任何操作會觸發。

它看起來像舊版本的Ember.js我可以簡單地添加一個動作參數給輸入助手，但不再工作。我假設我需要在計算屬性嘗試更改時設置一些可觀察的內容，但我無法在文檔或其他幫助中找到任何內容。

我也試圖擴展複選框發送單擊事件：

App.AllLanguagesCheckbox = Ember.Checkbox.extend(Ember.ViewTargetActionSupport, { 
    click: function() { 
    this.triggerAction({ 
     action: 'toggleAllVisibility' 
    }); 
    } 
});

然後裝在我的模板與

{{view App.AllLanguagesCheckbox checkedBinding=allAreVisible}}

這使得該複選框來觸發動作，但不更新基於控制器中計算出的屬性。

我覺得我在這裏失去了一些明顯的東西。

編輯

基於以下kingpin2k的答案，這裏的工作控制器代碼：

App.LanguagesController = Ember.ArrayController.extend({ 
    toggleAllVisibility: function() { 
    var newVisibility = !this.get('controller').get('allAreVisible'); 

    var needingVisibilityChange = this.get('controller').filterBy('visible', !newVisibility); 
    needingVisibilityChange.setEach('visible', newVisibility); 
    }, 

    allAreVisible: function(param) { 
    return this.filterBy('visible', false).get('length') === 0; 
    }.property('@each.visible'), 
});

它不與正常的範圍內調用，所以你必須明確地去通過控制器來獲取模型數組，但它現在按預期工作。

這裏是伴隨輸入助手：

{{input type='checkbox' checked=allAreVisible change=toggleAllVisibility}}

來源

2013-12-18 Thadd Selden

的問題是你的複選框被連接到一個計算性能，計算應該得到（又名你不應該將其設置）的值，這是會是什麼有人試圖檢查時發生。

_allAreVisible:false, 

allAreVisible: function(param) { 
    if(this.filterBy('visible', false).get('length') === 0){ 
     // set to true; 
     // else set to false 
}.observes('@each.visible'),

http://emberjs.jsbin.com/abODIKoj/1/edit

來源

2013-12-18 19:49:57 Kingpin2k

是的，但這是否意味着，有沒有辦法觸發從複選框的行動？這似乎是一個很常見的用例。 –

您也可以更改您的App.AllLanguagesCheckbox，然後在模板中發送語言綁定，然後您可以使用複選框類中的語言。 – fanta

你完全可以這樣做，http://emberjs.jsbin.com/abODIKoj/1/edit – Kingpin2k

Ember.js數組控制器計算屬性複選框

回答

相關問題