javascript - KnockoutJS对象不支持 'toFixed'

Question

我正在使用 KnockoutJS，但遇到了一个问题，我不知道如何寻找解决方案:

我有一个包含记录的表:

<script type="text/html" id="myItemsTemplate">
<tr>
    <td data-bind="text: MyNumber().toFixed(2)"></td>
    <td>
        <button class="btn" data-bind="click: $root.editItem">Edit</button></td>
    <td>
        <button class="btn btn-primary" data-bind="click: $root.enterHours">Enter Hours</button></td>
</tr>

最初“MyNumber().toFixed(2)”只是“MyNumber”，但我遇到了一个问题，“MyNumber”不会显示小数位，或者会根据值显示超过 2 位小数位(如果该值为“7.00”，它将仅显示“7”，如果该值为“7.345345”，它将显示完整的“7.345345”)。所以我将其更改为“MyNumber().toFixed(2)”。

这似乎修复了显示，但现在似乎已经破坏了更新部分:

<script type="text/html" id="myEditTemplate">
    <tr>
        <td>
            <input data-bind="value: MyNumber" class="table-edit" /></td>
        <td>
            <button class="btn btn-success" data-bind="click: $root.acceptItemEdit">Save</button></td>
        <td>
            <button class="btn btn-warning" data-bind="click: $root.cancelItemEdit">Cancel</button></td>
    </tr>
</script>

在这里，当我尝试保存记录时，它会保存它，但也会返回错误:

错误:无法解析绑定(bind)。消息:类型错误:对象不支持属性或方法“toFixed”；绑定(bind)值:文本:MyNumber().toFixed(2)

我尝试更改编辑模板，使其使用:ko.utils.unwrapObservable(MyNumber()).toFixed(2)或者MyNumber().toFixed(2) 以匹配项目模板。这不会导致 Javascript 错误，但也不会更新值。

我看到帖子说这是因为“MyNumber”不是可观察的，所以我尝试了 unwrapObservable()。除此之外，我不确定应该从哪里寻找问题所在。

Answer 1

根据您的问题描述，我在这里重现了一个测试用例:http://jsfiddle.net/w2nae2dq/。@icktoofay 在一方面是正确的:最好使用计算的可观察量(但它本身不是必需的)。如果您需要显示 2 个小数值进行编辑，您将需要一个可写的计算可观察量。但是，如果您只想显示 2 位十进制数并使 MyNumber 值可编辑，请检查 fiddle 的演示。

无论如何，您的代码的问题是类型转换之一。事实上，当您第一次设置 MyNumber 的值时，它是一个数字。但是，当用户在 <input> 中输入新值(从而更新 MyNumber )时，该值将设置为字符串值，这使得 text: 绑定(bind)无法执行 toFixed 方法。因此，您计算的可观察量将如下所示:

self.MyNumberRounded = ko.computed(function() {
    return parseFloat(self.MyNumber()).toFixed(2); // note parseFloat
}, self);

这就是为什么 Object doesn't support property :)