javascript - 将复选框绑定(bind)到 Ember 2+ 中一个数组的元素

Question

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

复选框显示所有已标记的内容，但每当我尝试使用操作 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}}

这是我的组件.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

对于双向绑定(bind)，您不能使用原始类型。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)

其中column是model_table.columns的一个元素，checked是它的属性