I have a global view model that is applied to the main div
and I also have other view models that I want to apply to nested elements within my main div
However, I am encountering an issue:
You cannot bind multiple times to the same element.
Below is a sample of the code causing the problem:
<!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>
I would greatly appreciate your expert guidance on this issue. Thank you!