San框架中自定义组件属性绑定与全选功能的实现

在San框架开发过程中，我们经常会遇到需要实现表格全选功能的需求，同时还需要处理自定义组件属性绑定的问题。本文将深入探讨如何优雅地实现这些功能。

自定义组件属性绑定

在San中，自定义组件的属性绑定是一个常见需求。以xui-checkbox组件为例，我们需要实现一个支持双向绑定的checked属性。当我们需要实现表格全选功能时，通常会遇到如何正确绑定选中状态的问题。

基础实现方案

最直接的实现方式是使用数组来存储选中的值：

const App = san.defineComponent({
    template: `<div>
        <label><input type="checkbox" checked="{{checkedAll}}" on-change="checkAllChange">select all</label>
        <label s-for="item in items"><input type="checkbox" value="{{item.text}}" checked="{=values=}">{{item.text}}</label>
    </div>`,

    computed: {
        checkedAll() {
            let items = this.data.get('items');
            let values = this.data.get('values');
            return items.length === values.length;
        }
    },

    checkAllChange() {
        let checkedAll = this.data.get('checkedAll');
        this.data.set(
            'values', 
            checkedAll ? [] : this.data.get('items').map(item => item.text)
        );
    }
});

这种方案简单直接，但存在一个限制：它假设每个item都有一个text属性作为唯一标识。

处理复杂数据结构

在实际项目中，数据格式往往更加复杂。item可能没有统一的text属性，或者需要多个属性组合才能形成唯一标识。针对这种情况，我们可以采用以下两种解决方案：

方案一：预处理数据

在组件初始化或数据传入时，先对数据进行预处理，添加统一的标识属性：

// 在数据传入前处理
const processedItems = rawItems.map(item => ({
    ...item,
    uniqueId: `${item.code1}-${item.code2}`
}));

方案二：使用计算属性或过滤器

在组件内部使用计算属性或过滤器动态生成唯一标识：

const App = san.defineComponent({
    // ...其他代码
    filters: {
        uniqueValue: function(item) {
            const uniquePropertNames = this.data.get('uniquePropertNames');
            return uniquePropertNames.map(name => item[name]).join('-');
        }
    },
    // ...其他代码
});

自定义组件实现全选功能

当使用自定义checkbox组件时，实现全选功能的思路略有不同：

const CheckBox = san.defineComponent({
    template: `
        <label>
            <input type="checkbox" checked="{=checked=}">{{label}}
        </label>
    `
});

const App = san.defineComponent({
    components: {
        'my-cb': CheckBox
    },

    template: `
        <div>
            <label><input type="checkbox" checked="{{checkedAll}}" on-change="checkAllChange">select all</label>
            <my-cb s-for="item in items" label="{{itemLabel(item)}}" checked="{=item.checked=}"></my-cb>
        </div>
    `,

    computed: {
        checkedAll() {
            return this.data.get('items').every(item => item.checked);
        }
    },

    itemLabel(item) {
        const names = this.data.get('itemNames');
        return names.map(name => item[name]).join('-');
    },

    checkAllChange() {
        const checkedAll = this.data.get('checkedAll');
        const newItems = this.data.get('items').map(item => ({
            ...item,
            checked: !checkedAll
        }));
        this.data.set('items', newItems);
    }
});

这种实现方式的优点在于：

1. 保持了数据的不可变性
2. 通过计算属性自动更新全选状态
3. 支持动态生成显示标签

最佳实践建议

1. 保持数据不可变：在修改选中状态时，总是创建新的数组或对象，而不是直接修改原数据。

2. 分离关注点：将生成唯一标识的逻辑与组件渲染逻辑分离，可以使用计算属性或过滤器。

3. 性能优化：对于大数据量的情况，考虑使用虚拟滚动等技术优化性能。

4. 可维护性：为自定义组件提供清晰的props定义和文档说明。

通过以上方法，我们可以在San框架中优雅地实现自定义组件的属性绑定和全选功能，同时保持代码的可维护性和扩展性。