Question

我有一些带有Knockout绑定的HTML，可以将值x显示为input的值和p标记中的文本。

<p data-bind="text: x"></p>
<p><input id="x" data-bind="attr: {value: x}"></p>
<button id="update">Update</button>

我想要做的是在按下更新按钮时取input中的值，将其四舍五入到最接近的整数，并让它在两个位置显示该舍入值。我试过这个：

var vm = {
    x: ko.observable(1)
};

ko.applyBindings(vm);

$('#update').click(function () {
    vm.x(Math.round($('#x').val()));
});

Here's the jsFiddle link again.

加载时，1的初始值会显示在两个位置。如果您将input中的值更改为2并点击“更新”按钮，则两个位置都会显示2。精彩。这适用于任何整数。

现在尝试不是整数的东西。输入5.3，然后按“更新”。 p正确更新以显示5，但input仍显示5.3。

Some further investigation似乎表明Knockout很乐意更新input，直到我手动编辑input中的值，此时它停止对{{1}做任何事情}。我可以理解为什么在某些情况下这可能是可取的，以防止用户输入被覆盖......但这不是我想要的行为。如何在更新视图模型时更新两个显示值？

Answer 1

如果您改变小提琴使用data-bind="value: x"而不是data-bind="attr: {value: x}"，它将完美无缺。

在编辑输入后，更新其value属性绑定到observable的输入

1 个答案: