Question

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

复选框显示全部标记，但每当我尝试使用操作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);
            }
        },
}

Helper 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)

其中column是model_table.columns的一个元素，并且已检查其属性

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

1 个答案: