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

jingxin2015 · 2024-01-02T10:13:30Z

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

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

errorrik · 2024-01-16T14:11:55Z

这个场景，玩法很多。一个建议是，全选的 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 · 2024-01-17T02:10:44Z

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

…

------------------ 原始邮件 ------------------ 发件人: "baidu/san" ***@***.***>; 发送时间: 2024年1月16日(星期二) 晚上10:12 ***@***.***>; ***@***.******@***.***>; 主题: Re: [baidu/san] 给自定义组件属性绑定值的问题，谢谢 (Issue #774) 这个场景，玩法很多。一个建议是，全选的 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); — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

errorrik · 2024-01-17T08:49:56Z

可以稍微换下思路，用 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 · 2024-01-19T02:58:21Z

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

…

------------------ 原始邮件 ------------------ 发件人: "baidu/san" ***@***.***>; 发送时间: 2024年1月17日(星期三) 下午4:50 ***@***.***>; ***@***.******@***.***>; 主题: Re: [baidu/san] 给自定义组件属性绑定值的问题，谢谢 (Issue #774) 可以稍微换下思路，用 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); — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

errorrik · 2024-01-19T07:29:29Z

没理解

jingxin2015 · 2024-01-19T07:41:32Z

下面是您给我回复的第一封邮件，我现在是按照这个思路来做的，但是现在我的需求场景是：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> <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);

…

------------------ 原始邮件 ------------------ 发件人: "baidu/san" ***@***.***>; 发送时间: 2024年1月19日(星期五) 下午3:29 ***@***.***>; ***@***.******@***.***>; 主题: 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: ***@***.***>

errorrik · 2024-01-22T10:23:19Z

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

jingxin2015 · 2024-01-30T04:41:04Z

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

…

------------------ 原始邮件 ------------------ 发件人: "baidu/san" ***@***.***>; 发送时间: 2024年1月22日(星期一) 晚上6:23 ***@***.***>; ***@***.******@***.***>; 主题: 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: ***@***.***>

errorrik · 2024-02-02T07:31:27Z

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

提前对数据进行处理，通过 computed，或者传给组件之前
就算是使用 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 · 2024-02-02T07:34:31Z

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

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

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

jingxin2015 closed this as completed Oct 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jingxin2015 commented Jan 2, 2024 •

edited

Loading

errorrik commented Jan 16, 2024

jingxin2015 commented Jan 17, 2024 via email

errorrik commented Jan 17, 2024

jingxin2015 commented Jan 19, 2024 via email

errorrik commented Jan 19, 2024

jingxin2015 commented Jan 19, 2024 via email

errorrik commented Jan 22, 2024

jingxin2015 commented Jan 30, 2024 via email

errorrik commented Feb 2, 2024

errorrik commented Feb 2, 2024

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

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

Comments

jingxin2015 commented Jan 2, 2024 • edited Loading

errorrik commented Jan 16, 2024

jingxin2015 commented Jan 17, 2024 via email

errorrik commented Jan 17, 2024

jingxin2015 commented Jan 19, 2024 via email

errorrik commented Jan 19, 2024

jingxin2015 commented Jan 19, 2024 via email

errorrik commented Jan 22, 2024

jingxin2015 commented Jan 30, 2024 via email

errorrik commented Feb 2, 2024

errorrik commented Feb 2, 2024

jingxin2015 commented Jan 2, 2024 •

edited

Loading