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>

最初＆＃34; MyNumber（）。toFixed（2）＆＃34;只是＆＃34; MyNumber＆＃34;，但我遇到了一个问题，其中＆＃34; MyNumber＆＃34;不会显示小数位或根据值显示超过2位小数（如果值为＆＃34; 7.00＆＃34;它只会显示＆＃34; 7＆＃34;如果是＆＃34; 7.345345＆＃34;它会显示完整的＆＃34; 7.345345＆＃34;）。所以我将其更改为＆＃34; MyNumber（）。toFixed（2）＆＃34;。

这似乎解决了显示问题，但现在似乎打破了更新部分：

<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>

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

错误：无法解析绑定。消息：TypeError：对象不支持属性或方法＆＃39; toFixed＆＃39 ;; 绑定值：text：MyNumber（）。toFixed（2）

我尝试更改编辑模板，因此它使用： ko.utils.unwrapObservable（mynumber的（））。toFixed（2）要么 MyNumber（）。toFixed（2）匹配项模板。这导致没有Javascript错误，但也没有更新值。

我看过帖子说这是因为＆＃34; MyNumber＆＃34;不是一个可观察的，所以我尝试了unwrapObservable（）。除此之外，我不知道我应该在哪里找出问题所在。

Answer 1

根据您的问题描述，我在此处复制了一个测试用例：http://jsfiddle.net/w2nae2dq/。 @icktoofay适用于一个部分：最好使用计算的observable（但不需要本身）。如果需要显示2个十进制值进行编辑，则需要一个可写的计算可观察量。但是，如果您只想显示2位十进制数并使MyNumber值可编辑，请查看小提琴以获得演示。

在任何情况下，您的代码问题都是类型转换之一。实际上，当您第一次设置MyNumber的值时，它就是一个数字。但是，当用户在<input>中输入新值（并因此更新MyNumber）时，此值将设置为字符串值，这使得{ {1}}绑定以执行text:方法。所以你的计算可观察量看起来像这样：

toFixed

这就是为什么self.MyNumberRounded = ko.computed(function() { return parseFloat(self.MyNumber()).toFixed(2); // note parseFloat }, self);：）

Answer 2

我没有使用过KnockoutJS，但是根据他们的文档，看起来你需要创建一个computed observable：

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

然后绑定到：

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

如果您想在编辑视图中使用格式化版本，则可能需要使用writable computed observables。

KnockoutJS对象不支持固定＆＃39;

2 个答案: