Menu
<html>
<head>
<script language="javascript" src="knockout-2.0.0.js"></script>
<script language="javascript" src="knockout.mapping.js"></script>
</head>
<div id="divFilter">
Name <input type=text data-bind="value:NAME1"></input>
<br>
Address<input type=text data-bind="value:ADDRESS"></input>
<br>
DOB <input data-bind="value:DOB" id="DOB" name="DOB" type=text></input>
<br>
SSN <input data-bind="value:SSN" id="SSN" type=text></input>
</div>
</html>
<script>
var oVM_Summary=null;
var VM_Summary= function(name1,address)
{
this.NAME1=ko.observable(name1);
this.ADDRESS=ko.observable(address);
};
oVM_Summary=new VM_Summary('Jon','123 addr');
ko.applyBindings(oVM_Summary);
</script>
When the code gets executed then the DOB and SSN shows [object HTMLInputElement] Question:- How to avoid the binding for DOB and SSN.
Thanks in advance...
573
asked Feb 05 '26 18:02
Update from your edits:
If your view model does not contain the DOB and SSN properties, then it will error out when trying to bind. In your case, this is actually not happening, because in many browsers you can access elements by id off of the window object. So, rather than not finding your properties it is finding window.DOB and window.SSN, which are the input elements.
If you change the names DOB and SSN in the ids, then you will start to see KO errors. You should define them in your view model, even as empty.
Update based on your comment: If you want to bind to multiple view models, then you will need to either do something like:
<div id="divFilter">
<div id="one">
Name <input type="text" data-bind="value:NAME1" />
<br/>
Address<input type="text" data-bind="value:ADDRESS" />
</div>
<div id="two">
DOB <input data-bind="value:DOB" id="DOB" name="DOB" type="text" />
<br />
SSN <input data-bind="value:SSN" id="SSN" type="text" />
</div>
</div>
applyBindings calls would look like:
ko.applyBindings(new VM_One(), document.getElementById("one"));
ko.applyBindings(new VM_Two(), document.getElementById("two"));
or you could do:
<div id="divFilter">
<div data-bind="with: one">
Name <input type="text" data-bind="value:NAME1" />
<br/>
Address<input type="text" data-bind="value:ADDRESS" />
</div>
<div data-bind="with: two">
DOB <input data-bind="value:DOB" id="DOB" name="DOB" type="text" />
<br />
SSN <input data-bind="value:SSN" id="SSN" type="text" />
</div>
</div>
JS would look like:
var viewModel = {
one: new VM_One(),
two: new VM_Two()
};
ko.applyBindings(viewModel);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
