I have a multi-page application with a navigation panel that is used across all pages. Each page has its own view model, the panel view model is the same. I could remember to always bind both models but I was hoping there would be a more universal solution. Some way to bind my one-page model to the whole document, and yet have an island of DOM elements automatically bound to a different model.
Here’s what I knew would work, but I didn’t like:
-
<script src="page-1.js"></script>
-
<div id="navigation-panel" data-bind="with: navModel">…</div>
-
<div id="page1" data-bind="with: page1Model">…</div>
-
The trouble is that I have to remember to bind navModel in page-1.js and all page-x scripts.
-
span class=”st0″>’navModel’‘page1Model’
I didn’t want
page-1.jsto care about elements that are on every page.Solution 1: Component
-
<script src="navigation.js"></script>
-
<script src="page-1.js"></script>
-
<script type="text/html" id="template-navigation">
-
<div id="navigation-panel">…</div>
-
</script>
-
<div data-bind="component: ‘navigation’"></div>
-
<div id="page1">…</div>
navigation.js:
-
span class=”st0″>’navigation’, {
-
template: { element: ‘template-navigation’ },
-
viewModel: NavModel
-
});
page-1.js:
This worked well but I didn’t like the extra markup. Also, I actually have several islands and I didn’t like having to define a component for each.
Solution 2: Custom binding handler
-
<script src="navigation.js"></script>
-
<script src="page-1.js"></script>
-
<div id="navigation-panel" data-bind="viewModel: navModel">…</div>
-
<div id="page1">…</div>
navigation.js:
page-1.js:
Nice and smooth. One handler takes care of all islands, all I have to do is to define a global variable for each view model.
Tags: Knockout 3.3.0
-