使用相同的可观察的敲除js绑定多个输入以执行相同的操作

时间:2012-11-27 11:52:59

标签: knockout.js

我想用同一个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的值。

我想对两个输入执行相同的操作,但我想更改通信范围的值。 (这只是一个示例,所以我可以在带有文本框的网格上执行相同操作;我希望更改文本框时重新计算包含已更改文本框的同一列上所有文本框的总和。)


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

请看一下截图
enter image description here

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

感谢。

1 个答案:

答案 0 :(得分:1)


请查看我为您创建的this demo 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());


它能回答你的问题吗? 感谢。