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

Bind checkbox to element of one array in Ember 2+

本文关键字：一个 数组 元素 绑定 复选框 Ember      更新时间：2023-09-26

我试图使用Ember 2.8将一个数组的元素绑定到复选框的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}}

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

对于双向绑定，不能使用基元类型。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}

每当您更新复选框时，它都会更新相应的列。isChecked属性。

要更新相应的列，需要使用

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

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

相关文章：