knockout.js - 使用相同的 obervable knockoutjs 绑定多个输入以执行相同的操作

Question

我想用相同的 observable 绑定多个文本输入（相同的操作）

<input id="test1" name="test1" type="text" data-bind="value: searchQuantity"/>
<input id="test2" name="test2" type="text" data-bind="value: searchQuantity"/>

var viewModel = {
        searchQuantity: ko.observable(),
    };


<p>You have typed: <span id="spantest1" data-bind="text: searchQuantity"></span></p>
<p>You have typed: <span id="spantest2" data-bind="text: searchQuantity"></span></p>

但是当我更改输入 test1 的值时，它会更改 test2 的值。

我想对两个输入执行相同的操作，但我想更改对应跨度的值。（这只是一个示例，因此我可以在带有文本框的网格上执行相同的操作；我希望在更改文本框时重新计算包含更改后的文本框的同一列上所有文本框的总和。）

---

我想我没有很好地解释我的问题。

请看一下截图

我真正想要的是在更改红色文本框中的值时，绿色单元格将使用列的总和进行更新（总和将按年份计算）。

谢谢。

Answer 1

请看一下我为您创建的这个演示。
HTML 代码

<input id="test1" name="test1" type="text" data-bind="value: searchQuantity1, valueUpdate:'afterkeydown'"/>
<input id="test2" name="test2" type="text" data-bind="value: searchQuantity2, valueUpdate:'afterkeydown'"/>

<p>Test1 value is : <span id="spantest1" data-bind="text: searchQuantity1"></span></p>
<p>Test2 value is : <span id="spantest2" data-bind="text: searchQuantity2"></span></p>
<p>Sum: <span id="spantest3" data-bind="text: spans"></span></p>

Javascript代码

var viewModel = function(data) {
  var self = this;
  self.searchQuantity1 = ko.observable(1);
  self.searchQuantity2 = ko.observable(2);
  self.spans = ko.computed(function() {
      return Number(self.searchQuantity1 ())+Number(self.searchQuantity2 ());
  }, self);
};

ko.applyBindings(new viewModel());

它回答你的问题了吗？
谢谢。