使用表单中的数字

Question

我正在用Aurelia构建一个应用程序,并且到目前为止真的很喜欢这个框架,但是我偶然发现了一个问题,我试图显示一个复选框列表,其值为数字(ID:s实际上),Aurelia似乎将它们转换为字符串,因此比较失败.

我基本上有类似的东西:

export class MyVm {
    constructor () {
        this.items = [
            {name: 'Foo', id: 0},
            {name: 'Bar', id: 1},
            {name: 'Baz', id: 2}
        ];
        this.selectedItems = [0, 2];
    }
}

在我看来:

<ul>
    <li repeat.for="item of items">
        <input type="checkbox" value.bind="item.id" checked.bind="selectedItems">
        ${item.name}
    </li>
</ul>

为了实现这一点,我实际上必须做的this.selectedItems = ["0", "2"]只是导致我自己的代码中的一堆其他比较问题.我也不希望以后在保存数据时将所选项目作为字符串发送到服务器.

我已经尝试使用一个简单的值转换器转换为toString toView和parseInt fromView,但我无法在selectedItems数组上运行此转换器:

export class IntValueConverter {
    toView (val) {
        return val.toString();
    }

    fromView (val) {
        return parseInt(val);
    }
}

你会怎么解决这个问题？

Answer 1

你几乎拥有它.这部分有一个小问题:

<input type="checkbox" value="${item.id}" checked.bind="selectedItems">

该<input>元素的value属性强制将它分配给一个字符串的一切.不仅如此,字符串插值绑定(例如${...})也将所有内容强制转换为字符串.您需要保留数字项ID.替换value="${item.id}"为model.bind="item.id",它将工作.无需转换器.

巧合的是,我只是在复选框,无线电和选择绑定到Aurelia绑定仓库上推出了一套详尽的文档.他们尚未发布到官方Aurelia文档应用程序,但他们应该在周二.

此外 - 如果你看到任何奇怪的id为零的项目 - 周二也有一个解决方案.

最后,我知道这不是你的问题,但对于那些在这里寻找表单中的绑定数字的人来说,这里有一些使用自定义元素和自定义属性的基本示例:

https://gist.run/?id=d9d8dd9df7be2dd2f59077bad3bfb399