给自定义组件属性绑定值的问题，谢谢

[jingxin2015]

我现在自定义了一个组件，比如是 xui-checkbox ，组件有一个 checked 属性，支持双向绑定，我现在想绑定一个函数，如下：

是做一个表格的全选列，现在在点击全选 checkAll 的时候，会把所有的数据的 id 都存到 checkedMap 这个map里，但是表格数据行里的 checkbox 并没有选中，尝试把 checkedMap 换成一个普通对象也没有效果，请问怎么样才能实现这个效果呢？

[errorrik]

这个场景，玩法很多。一个建议是，全选的 checkbox 不要用双向绑定。下面列表的要不要双向绑定都行

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)
        );
    }
});

let app = new App({
    data: {
        items: [
            {text: 'item1'},
            {text: 'item2'},
            {text: 'item3'}
        ],
        values: []
    }
});

app.attach(document.body);

[jingxin2015]

我现在自己封装了一个 checkbox 组件，之后表格组件里使用的这个封装的组件，是不是就不能用这种绑定数组的方式了呀？

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "baidu/san" ***@***.***&gt;; 发送时间:&nbsp;2024年1月16日(星期二) 晚上10:12 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [baidu/san] 给自定义组件属性绑定值的问题，谢谢 (Issue #774) 这个场景，玩法很多。一个建议是，全选的 checkbox 不要用双向绑定。下面列表的要不要双向绑定都行 const App = san.defineComponent({ template: `<div&gt; <label&gt;<input type="checkbox" checked="{{checkedAll}}" on-change="checkAllChange"&gt;select all</label&gt; <label s-for="item in items"&gt;<input type="checkbox" value="{{item.text}}" checked="{=values=}"&gt;{{item.text}}</label&gt; </div&gt;`, 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 =&gt; item.text) ); } }); let app = new App({ data: { items: [ {text: 'item1'}, {text: 'item2'}, {text: 'item3'} ], values: [] } }); app.attach(document.body); — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***&gt;

[errorrik]

可以稍微换下思路，用 item 的 checked 来双绑，checkAll 不要双榜。没有本质区别

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="{{item.text}}" checked="{=item.checked=}"></my-cb>
        </div>
    `,

    computed: {
        checkedAll() {
            let items = this.data.get('items');
            let len = items.length;

            while (len--) {
                if (!items[len].checked) {
                    return false;
                }
            }

            return true;
        }
    },

    checkAllChange() {
        let checkedAll = this.data.get('checkedAll');
        let items = this.data.get('items');
        let newItems = [];

        for (let i = 0, len = items.length; i < len; i++) {
            newItems.push({
                text: items[i].text,
                checked: !checkedAll
            });
        }
        this.data.set('items', newItems);
    }
});

let app = new App({
    data: {
        items: [
            {text: 'item1'},
            {text: 'item2'},
            {text: 'item3'}
        ]
    }
});

app.attach(document.body);

[jingxin2015]

我的表格的数据源没有 checked 属性，我不想在表格组件里去更改数据源，比如给数据源添加属性，我现在在表格里是直接使用的input，没有使用我自己封装的checkbox组件，没问题了，但是我现在又遇到一个新的问题：下面的代码中 item 的checkbox 的 value 属性绑定的是&nbsp; item.text 属性，现在这个表格组件的数据源不一定有 text 属性，还可能会有某两个属性一起是唯一的场景，所以我就把 value="{{item.text}}" 修改为了 value="{{item | uniqueValue}}" 这样，uniqeValue 是一个 filter，之后我把相关的地方也有修改为了这种方式，现在全选没有问题，但是item里的checkbox点击后并不能选中，我调试查看可能是和变更周期有关系？比如表格有3行，点击其中一行的checkbox，那么这个filter会执行3次，每行都会执行一次，我想不出来怎么解决了，也不知道这种方式是否可行？请指点一下吧，谢谢！！ const App = san.defineComponent({ template: `<div&gt; <label&gt;<input type="checkbox" checked="{{checkedAll}}" on-change="checkAllChange"&gt;select all</label&gt; <label s-for="item in items"&gt;<input type="checkbox" value="{{item | uniqueValue}}" checked="{=values=}"&gt;{{item.text}}</label&gt; </div&gt;`, filters: { uniqueValue: fuction(dateItem: any) { const uniquePropertyNames = this.data.get('uniquePropertyNames'); const uniqueValues = []; uniqueProperyNames.forEach(properyName =&gt; uniqueValues.push(dateItem[properyName ])); return uniqueValues.join('-'); } }, 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 =&gt; item.text) ); } }); let app = new App({ data: { items: [ {text: 'item1'}, {text: 'item2'}, {text: 'item3'} ], values: [] } }); app.attach(document.body);

…

------------------ 原始邮件 ------------------ 发件人: "baidu/san" ***@***.***&gt;; 发送时间:&nbsp;2024年1月17日(星期三) 下午4:50 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [baidu/san] 给自定义组件属性绑定值的问题，谢谢 (Issue #774) 可以稍微换下思路，用 item 的 checked 来双绑，checkAll 不要双榜。没有本质区别 const CheckBox = san.defineComponent({ template: ` <label&gt; <input type="checkbox" checked="{=checked=}"&gt;{{label}} </label&gt; ` }); const App = san.defineComponent({ components: { 'my-cb': CheckBox }, template: ` <div&gt; <label&gt;<input type="checkbox" checked="{{checkedAll}}" on-change="checkAllChange"&gt;select all</label&gt; <my-cb s-for="item in items" label="{{item.text}}" checked="{=item.checked=}"&gt;</my-cb&gt; </div&gt; `, computed: { checkedAll() { let items = this.data.get('items'); let len = items.length; while (len--) { if (!items[len].checked) { return false; } } return true; } }, checkAllChange() { let checkedAll = this.data.get('checkedAll'); let items = this.data.get('items'); let newItems = []; for (let i = 0, len = items.length; i < len; i++) { newItems.push({ text: items[i].text, checked: !checkedAll }); } this.data.set('items', newItems); } }); let app = new App({ data: { items: [ {text: 'item1'}, {text: 'item2'}, {text: 'item3'} ] } }); app.attach(document.body); — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***&gt;

[errorrik]

没理解

[jingxin2015]

下面是您给我回复的第一封邮件，我现在是按照这个思路来做的，但是现在我的需求场景是：items 的格式是不统一的，比如您这个例子中 item 里有 text 属性，但是我的实际场景中 text 属性可能是 id，也可能是某两个属性组合在一起，所以我想让用组件的人传入进来一个属性（uniquePropertNames），这个属性是个字符串数组，比如属性 uniquePropertNames 传入为 ['code1', 'code2']，我的组件就通过 filter 把 item 的 code1 和 code2 属性的值组合到一起作为 checkbox 的 value，但是我实现完后就有一些问题了，全选和取消全选没问题，每一个 item 下的 checkbox 选中就有问题了，获取到的 value 是个 undefind。 这个场景，玩法很多。一个建议是，全选的 checkbox 不要用双向绑定。下面列表的要不要双向绑定都行 const App = san.defineComponent({ template: `<div&gt; <label&gt;<input type="checkbox" checked="{{checkedAll}}" on-change="checkAllChange"&gt;select all</label&gt; <label s-for="item in items"&gt;<input type="checkbox" value="{{item.text}}" checked="{=values=}"&gt;{{item.text}}</label&gt; </div&gt;`, 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 =&gt; item.text) ); } }); let app = new App({ data: { items: [ {text: 'item1'}, {text: 'item2'}, {text: 'item3'} ], values: [] } }); app.attach(document.body);

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "baidu/san" ***@***.***&gt;; 发送时间:&nbsp;2024年1月19日(星期五) 下午3:29 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [baidu/san] 给自定义组件属性绑定值的问题，谢谢 (Issue #774) 没理解 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***&gt;

[errorrik]

@jingxin2015 我看懂了，但是不确定你具体是怎么写的。上代码吧

[jingxin2015]

<input type="checkbox" checked="{=checkedValues=}" value="{{item | uniqueValue}}" on-change="onItemCheckChange($event, index, item)" disabled={{disabled}} /&gt; filters: { &nbsp; &nbsp; uniqueValue: function (item) { &nbsp; &nbsp; &nbsp; const uniquePropertNames = this.data.get('uniquePropertNames'); &nbsp; &nbsp; &nbsp; const values = []; &nbsp; &nbsp; &nbsp; uniquePropertNames.forEach((element) =&gt; { &nbsp; &nbsp; &nbsp; &nbsp; values.push(item[element]); &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; return values.join('-'); &nbsp; &nbsp; } &nbsp; }, 你好，我的代码是上面那样写的，就是 checkbox 的 value 属性绑定的是通过 uniqueValue filter 转换后的值。 不过这个问题暂时我把 uniquePropertyNames 属性改为字符串了，只支持一个属性名称，是没问题的，如下： <input type="checkbox" checked="{=checkedValues=}" value="{{item[uniquePropertyNames]}}" on-change="onItemCheckChange($event, index, item)" disabled={{disabled}} /&gt; 我们暂时没有多个属性唯一的场景，当时没怎么考虑场景，就想着能够支持多个比较好，呵呵。 我现在还有另外一个问题，关于路由的，因为我们一开始做的系统没有登录页面，所以参考的（https://baidu.github.io/san/practice/san-router-spa/）这篇文章来做的路由，Home 是一个根组件，附加到页面的 app 元素上，其他是业务逻辑子组件，我现在想添加一个 登录页面，但是这个登录页面应该也是附加到 app 元素上的，因为 Home 页面有一些固定的信息，比如顶部导航之类的，其他页面还要有逻辑控制能跳转到登录页，这个怎么实现呢？谢谢！

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "baidu/san" ***@***.***&gt;; 发送时间:&nbsp;2024年1月22日(星期一) 晚上6:23 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [baidu/san] 给自定义组件属性绑定值的问题，谢谢 (Issue #774) @jingxin2015 我看懂了，但是不确定你具体是怎么写的。上代码吧 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***&gt;

[errorrik]

我不知道是什么原因导致你的 item 的格式不统一，从而需要 uniquePropertyNames 来控制。但是既然有uniquePropertyNames，说明数据的处理方式也是有迹可循的。你有两种方式处理：

1. 提前对数据进行处理，通过 computed，或者传给组件之前
2. 就算是使用 filter 或 method，使用自定义组件也一样能用绑定，做法和之前也没有区别

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, itemNames)}}" checked="{=item.checked=}"></my-cb>
        </div>
    `,

    computed: {
        checkedAll() {
            let items = this.data.get('items');
            let len = items.length;

            while (len--) {
                if (!items[len].checked) {
                    return false;
                }
            }

            return true;
        }
    },

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

    checkAllChange() {
        let checkedAll = this.data.get('checkedAll');
        let items = this.data.get('items');
        let newItems = [];

        for (let i = 0, len = items.length; i < len; i++) {
            newItems.push(Object.assign({}, items[i], {checked: !checkedAll}));
        }
        this.data.set('items', newItems);
    }
});

let app = new App({
    data: {
        items: [
            {text: 'item1', text2: '1'},
            {text: 'item2', text2: '2'},
            {text: 'item3', text2: '3'}
        ],
        itemNames: ['text', 'text2']
    }
});

app.attach(document.body);

[errorrik]

我现在还有另外一个问题，关于路由的，因为我们一开始做的系统没有登录页面，所以参考的（https://baidu.github.io/san/practice/san-router-spa/）这篇文章来做的路由，Home 是一个根组件，附加到页面的 app 元素上，其他是业务逻辑子组件，我现在想添加一个 登录页面，但是这个登录页面应该也是附加到 app 元素上的，因为 Home 页面有一些固定的信息，比如顶部导航之类的，其他页面还要有逻辑控制能跳转到登录页，这个怎么实现呢？谢谢！

这个问题也有两种方式处理，使用 san-router：

1. 路由变化的时候，组件渲染的目标 dom 是可以配置 target 的。你可以有个固定结构，只让路由控制变化区域 https://baidu.github.io/san-router/docs/guide/add-route
2. 使用 withRoute 嵌套路由。https://baidu.github.io/san-router/docs/guide/nested-routes