I am trying to understand what Knockout does to elements on the page when it updates the values in them due to applyBinding.
Consider this simple example:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script src="../lib/jquery-1.7.1.min.js"></script>
<script src="../lib/knockout-2.0.0.js"></script>
<script>
$(function () {
$("#itemNumber").change(function() {
console.log('itemNumber');
});
//create The view Model
var product1 = {
id: 1002,
itemNumber: "T110",
model: "Taylor 110",
salePrice: 699.75
};
ko.applyBindings(product1);
});
</script>
</head>
<body >
<input data-bind="value: itemNumber" type="text" id="itemNumber" />
</body>
</html>
When i run the page T110 appears in my input box and when i change the value the console message is shown as i expect.
But notice it does not fire when applyBindings is called during the page load as I would expect…
So what mechanism does it use to modify the input element’s value? And what i am really looking for is some way to detect this in the element itself as this is a control and I would like to copy the real value from a hidden field to the right place but maintain any values stuck to it…
Thanks
You can see for yourself, reading the source for the value binding.
The default event for handling changes is the change event but that is configurable.
Also, a great way to learn KnockoutJs is to go through the tutorials.