Question

124

Knockout JS - data-bind multiple values

rated 0 times [ 130] [ 6] / answers: 1 / hits: 16280 / 12 Years ago, sat, july 7, 2012, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

billier

Add To Favorites

Follow

Total Points: 153

Total Questions: 85

Total Answers: 91

Location: Monaco

Member since Sun, Jan 16, 2022

2 Years ago

answered 12 Years ago breap · Accepted Answer

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