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"即可。无需转换器。

巧合的是我just pushed一套关于复选框，广播和选择绑定到Aurelia绑定回购的详尽文档。它们尚未发布到官方Aurelia文档应用程序，但它们应该在周二出现。

另外 - 如果你看到ID为零的项目有什么奇怪的东西，那么周二就会出现a fix。

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

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

处理表单中的数字

1 个答案: