I have a global view model which is applied to main div
and I have some other view models and I want to apply them to nested elements of my main div
but I am getting the
You cannot apply bindings multiple times to the same element.
and here it is a sample :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div id="main">
<input data-bind="value:title,valueUpdate:'afterkeyup'" />
<h1 data-bind="text:title"></h1>
<hr />
<div id="sub">
<input data-bind="value:name,valueUpdate:'afterkeyup'" />
<label data-bind="text:name"></label>
<!-- a reference to title in globalViewModel -->
<h1 data-bind="text:title"></h1>
</div>
</div>
<script src="Scripts/knockout-3.2.0.js"></script>
<script>
var globalViewModel = {
title : ko.observable("global title")
}
var subViewModel = {
name : ko.observable("Test")
}
ko.applyBindings(globalViewModel);
ko.applyBindings(subViewModel, document.getElementById('sub'));
</script>
</body>
</html>
Please guide me with your brilliant solutions :)