将复选框绑定到 Ember 中一个数组的元素 2+

Question

我正在尝试使用 Ember 2.8 将一个数组的元素绑定到复选框的选中属性。我也在一个组件中使用它。

复选框显示所有已标记，但每当我尝试使用操作 hideOrShowAllColumns 它不会再次标记所有复选框，如果有一个未选中...所以我想我通过了数组元素的值而不是元素本身。我不知道如何在 javascript/ember...

中执行此操作

这是我的看法

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

Answer 1

对于双向绑定，您不能使用原始类型。checked=(getItemAt allColumns index)这部分不会练习。当您选中复选框时，它不会更新 allColumns 数组值。
所以我建议你在这个列数组中有 model_table.columns 你可以检查属性并且你可以在输入助手中使用它。

首先，model_table.columns 应该是一个对象数组。

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

其次，使用htmlbar中的属性

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

每当您更新复选框时，它都会更新对应的 column.isChecked 属性.

更新对应的栏目需要用到

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

其中列是 model_table.columns 的一个元素，选中的是它的属性

将复选框绑定到 Ember 中一个数组的元素 2+

Bind checkbox to element of one array in Ember 2+

javascript

ember.js

checkbox

ember-data

ember.js-2