Knockout JS - data-bind multiple values

Question

Question about JS Knockout library - I have three inputs, all data-Bind-ed to the same variable. Two have a boolean value of false and one has a boolean value of true. (I can't change them to ints, unfortunately, which would make this problem easier). Although the two false-valued inputs share behavior, I need to differentiate between them somehow to trigger slightly different behaviors.

Is it possible to data-bind each to another variable, with different values? So instead of each being

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

I would have something like

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

and

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

I tried that directly and didn't work so I don't know if it's possible. Thanks so much.

So, none of those bindings are valid, and I'm not entirely sure what you are trying to do, or how you expect this to behave. If the value of test1 updates, and doesn't match test2 what would you want to happen? You might be able to achieve this with computed observables, but you cannot bind to two properties like this. And I don't know why you would want to. — Kyeotic
– Kyeotic, Commented Jul 7, 2012 at 0:58

Luffy · Accepted Answer · 2012-07-07 20:30:49Z

You cant bind multiple variables directly but creating a custom bind function do the trick for you.

Example : http://jsfiddle.net/gurkavcu/ePW8Y/
** Change input value (true , false) to trigger the update function

HTML

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

JS

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

})

Modify the update function for your needs. You can add any number of variable to the binding with v1 : ... , v2 : ... , v3 : ... and access it via allBindingsAccessor().v1 , allBindingsAccessor().v2 , allBindingsAccessor().v3

Collectives™ on Stack Overflow

Knockout JS - data-bind multiple values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related