Running into a bit of a snag with a project I've been working on.
Initially, the website had one page using Knockout, while the rest used jQuery. After facing issues with the Foundation modal, I ended up binding the viewmodel for the Knockout page to the body element.
Now, four months later, I've rebuilt our shopping basket in Knockout without realizing the implications. The shopping basket appears on every page and is included using a ZF2 partial.
Returning to the page I worked on months ago, it's now completely broken with the console displaying this error message:
Uncaught Error: You cannot apply bindings multiple times to the same element.
Here's a snippet of my layout:
<html>
<head>
<title>My Website</title>
</head>
<body> // SPA from 4 months ago bound here
<nav>
<div id='shopping-basket'> // Shopping basket bound here
...
</div>
</nav>
<div id='my-app'>
...
</div>
</body>
</html>
JavaScript:
var MyAppViewModel = function() {
// logic
};
var ShoppingBasketViewModel = function() {
//logic
};
ko.applyBindings(new MyAppViewModel(), document.body);
ko.applyBindings(new ShoppingBasketViewModel(), document.getElementById('shopping-basket');
If only there was a way to have both viewmodels coexist, nested in the Dom and independent of each other, when applying the bindings.