將複選框綁定到Ember中的一個數組的元素2+

我試圖使用Ember 2.8將一個數組的元素綁定到複選框的選中屬性。我也在一個組件中使用它。將複選框綁定到Ember中的一個數組的元素2+

該複選框顯示所有標記，但每當我嘗試使用動作hideOrShowAllColumns它不標記所有複選框，如果有一個沒有檢查...所以我想我傳遞的數組元素的值而不是元素本身。我不知道如何在JavaScript /燼做到這一點...

這是我的看法

{{input type="checkbox" name="all" checked=allColumnsChecked change=(action "hideOrShowAllColumns")}} 
All 
{{#each model_table.columns as |column index|}} 
    {{input type="checkbox" name=column checked=(getItemAt allColumns index) change=(action "hideOrShowColumn" index)}} 
    {{column}} 
{{/each}}

這是我component.js

export default Ember.Component.extend({ 
    init() { 
     this._super(...arguments); 
     this.set('allColumnsChecked', true); 
    }, 
    didReceiveAttrs() { 
     this._super(...arguments); 
     let columnMap = this.get('columnMap'); 
     let allColumns = Array(columnMap.length).fill(true); 
     this.set('allColumns', allColumns); 
    }, 
    actions: { 
     hideOrShowAllColumns() { 
      let all = this.get('allColumnsChecked'); 
      all = !all; 
      this.set('allColumnsChecked', all); 
      if (all === true) { 
       let allColumns = this.get('allColumns'); 
       allColumns = allColumns.map(() => true); 
       this.set('allColumns', allColumns); 
      } 
     }, 
}

助手話getItemAt

export function getItemAt(params) { 
    return params[0][params[1]]; 
}

來源

2016-09-28 mk2

對於雙向綁定，您不能使用原始類型。 checked=(getItemAt allColumns index)這部分不會鍛鍊。當您選中複選框時，它不會更新allColumns數組值。
所以我建議你在這個列數組中有model_table.columns你可以檢查屬性，你可以在輸入助手中使用它。

首先，model_table.columns應該是一個對象數組。

model_table.columns = [ 
    { 
     'name': 'foo', 
     'checked': true 
    }, 
    { 
     'name': 'bar', 
     'checked': true 
    } 
]

其次，使用屬性在每次更新複選框，將更新相應column.isChecked財產htmlbar

{{#each model_table.columns as |column index|}} 
    {{input type="checkbox" name=column.name checked=column.checked change=(action "hideOrShowColumn" index)}} 
    {{column.name}} 
{{/each}

。

要更新相應的列需要使用

Ember.set(column, 'checked', true)

，其中一列是model_table.columns的一個元素，並檢查是其財產

來源

2016-09-28 15:23:47 kumkanillam

我懷疑這可能是故障的原因，但我該怎麼辦使這個函數'isChecked'？我的'model_table.columns'具有列的名稱;我的var'allColumns'具有選中列的值。例如：'model_table.columns = ['id'，'name']; allColumns = [true，false];' – mk2

好吧，我想我有一個想法。我應該使'model_table.columns = [{'name'：'id'，'checked'：true}，{'name'：'name'，'checked'：true}]'。讓我測試... – mk2

是的。使用allColumns和model_table.columns使用計算屬性生成此結構。 'model_table.columns = [{id：1，name：'name1'，value：'value1'，isChecked：true}]'嘗試一下 – kumkanillam

將複選框綁定到Ember中的一個數組的元素2+

回答

相關問題