Knockout JS - 数据绑定多个值答案

【问题标题】：Knockout JS - data-bind multiple valuesKnockout JS - 数据绑定多个值
【发布时间】：2012-07-07 10:33:32
【问题描述】：

关于 JS Knockout 库的问题 - 我有三个输入，所有数据都绑定到同一个变量。两个的布尔值为 false，一个的布尔值为 true。（不幸的是，我不能将它们更改为整数，这会使这个问题更容易）。尽管两个假值输入共享行为，但我需要以某种方式区分它们以触发稍微不同的行为。

是否可以将每个数据绑定到另一个具有不同值的变量？所以不是每个都是

    <input data-Bind="checked:test" value="false">

我会有类似的东西

    <input data-Bind="test, test2" value="false, 1">

和

    <input data-Bind="test, test2" value="false, 2">?

我直接尝试过，但没有成功，所以我不知道是否可能。非常感谢。

【问题讨论】：

所以，这些绑定都不是有效的，我不完全确定您要做什么，或者您期望它的行为方式。如果test1 的值更新，并且与test2 不匹配，您希望发生什么？您可能可以通过计算的 observables 来实现这一点，但您不能像这样绑定到两个属性。我不知道你为什么想要。

标签： javascript knockout.js

【解决方案1】：

您不能直接绑定多个变量，但创建自定义绑定函数可以为您解决问题。

示例：http://jsfiddle.net/gurkavcu/ePW8Y/
** 改变输入值（true, false）触发更新功能

HTML

<input data-bind="customData: test , v1 : test2"/>
<div>
    <span data-bind ="text : test"/>
</div>
<div>
    <span data-bind ="text : test2"/>
</div>

ko.bindingHandlers.customData = {
      init: function(element, valueAccessor, allBindingsAccessor, viewModel) {  
           $(element).change(function () {
                valueAccessor()(element.value);
            });       
      },
       update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
          var value =ko.utils.unwrapObservable(valueAccessor());
          var v1 = allBindingsAccessor().v1;

          if(value === "true") {
             v1("1"); 
             console.log(v1());
          }
          else  if(value === "false") {
             v1("2"); 
             console.log(v1());
          }
     }
};  


function ViewModel() {

    this.test =  ko.observable(false);
    this.test2 =  ko.observable("2");

};

$(function() {  

    var viewModel = new ViewModel();
    ko.applyBindings(viewModel); 

})

根据您的需要修改更新功能。您可以使用 v1 : ... , v2 : ... , v3 : ... 将任意数量的变量添加到绑定中，并通过 allBindingsAccessor().v1 、 allBindingsAccessor().v2 、 allBindingsAccessor().v3

【讨论】：