0

我正在尝试使用 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]];
}
4

1 回答 1

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)

其中 column 是 the 的一个元素，model_table.columnschecked 是它的属性

于 2016-09-28T15:23:47.637 回答