KnockoutJS Object doesn't support 'toFixed'

KnockoutJS Object doesn't support 'toFixed'

本文关键字：support toFixed Object KnockoutJS doesn      更新时间：2023-09-26

我正在使用 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>

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

错误：无法分析绑定。消息：类型错误：对象不支持属性或方法"toFixed";绑定值：文本：MyNumber（）.toFixed（2）

我尝试更改编辑模板，以便它使用：ko.utils.unwrapObservable（MyNumber（））.toFixed（2）或MyNumber（）.toFixed（2） 以匹配项模板。 这不会导致Javascript错误，但也不会更新值。

我看到一些帖子说这是因为"MyNumber"不是一个可观察的，所以我尝试了unwrapObservable（）。 除此之外，我不确定我应该在哪里寻找找出问题所在。

按照您的问题描述，我在这里复制了一个测试用例：http://jsfiddle.net/w2nae2dq/。@icktoofay一部分是正确的：最好使用计算的可观察量（但本身不是必需的）。如果需要显示要编辑的 2 个十进制值，则需要可写计算可观察值。但是，如果您只想显示 2 个十进制数并使 MyNumber 值可编辑，请检查小提琴以进行演示。

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

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

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

我没有

使用过 KnockoutJS，但从他们的文档中，看起来你需要创建一个计算的可观察量：

this.formattedMyNumber = ko.computed(function() {
    return this.MyNumber().toFixed(2);
}, this);

然后绑定到它：

<td data-bind="text: formattedMyNumber"></td>

如果还想在编辑视图中使用格式化版本，则可能需要使用可写计算可观察量。

相关文章：