knockout.js - Remove the value Binding based on the model -

knockout.js - Remove the value Binding based on the model -

i have model property @ times should bind input element , select element, based on configuration. utilize value binding on both elements , hide either 1 using visible binding.

as both bindings on page, when input visible , when come in text not exists in hidden select, unable alter value. in case input element visible (isdropdown false) not want select bound (or there other improve way handle this?).

sample javascript model

var player = function (name, age, country, isdropdown) { this.name = ko.observable(name); this.age = ko.observable(age); this.country = ko.observable(country); this.isdropdown = ko.observable(isdropdown); }; var playermodel = function () { var self = this; self.myplayer = new player('murray', 28, 'uk', false); //self.myplayer = new player('murray', 28, 'uk', true); self.countrylist = ['us', 'uk', 'swiss']; } var model = new playermodel(); ko.applybindings(model);

html code

name: <input type="text" data-bind="value: myplayer.name" /> <br/>age: <input type="text" data-bind="value: myplayer.age" /> <br/>country: <input type="text" data-bind="value: myplayer.country, visible: !(myplayer.isdropdown())" /> <select data-bind="options: $root.countrylist, value:myplayer.country, optionscaption:'choose..', visible: myplayer.isdropdown()"></select> <br/> (there dropdown / input hidden, please swap commented lines in javascript model enable )

respective js fiddle here

use virtual if bindings instead. prevents databound select element beingness in dom , bound when isdropdown false.

<!-- ko ifnot: myplayer.isdropdown --> <input type="text" data-bind="value: myplayer.country" /> <!-- /ko --> <!-- ko if: myplayer.isdropdown --> <select data-bind="options: $root.countrylist, value:myplayer.country, optionscaption:'choose..'"> </select> <!-- /ko -->

jsfiddle

knockout.js