Durandal : ViewModel does not work in a common view - durandal

Question

I'm trying to create a common area for my navigation/menus (vertical) in my shell page. This shell's menu area will then be updated by new set of menus on every page transition. heres inside my shell.js
define(function (require) {
var router = require('durandal/plugins/router');
var Menu = function (name, children) {
this.name = ko.observable(name);
this.children = ko.observableArray(children);
}
var Menus = ko.observableArray([]);
function GetDSRList() {
router.navigateTo('#/reports/list2');
}
function activate() {
router.mapNav('reports/index', 'viewmodels/reports/index', 'Reports');
router.mapNav('reports/list', 'viewmodels/reports/list', 'List');
router.mapNav('reports/list2', 'viewmodels/reports/list2', 'List2');
router.mapNav('home/menu', 'viewmodels/home/menu', 'Main');
return router.activate('home/menu');
}
function viewAttached() {
$(document).ready(function () {
$("#panelbar").kendoPanelBar({
expandMode: "single"
}),
$("#splitter").kendoSplitter({
panes: [
{ collapsible: false, resizable: false, size: "20%" },
{ collapsible: false }
]
});
});
}
function token() {
return $("input[name='__RequestVerificationToken']").val();
}
var shell = {
router: router,
activate: activate,
viewAttached: viewAttached,
GetDSRList: GetDSRList,
Menus: Menus,
token: token,
Menu: Menu
}
return shell;
And for the View (shell.html)
<div style="height:100%;">
<div class="loader" data-bind="css: { active: router.isNavigating }">
</div>
<div id="splitter" style="border:0;height:100%">
<div class="nav-panel-section">
<ul id="panelbar">
<li data-bind="foreach : Menus">
<span class="k-link k-header" data-bind="text: name">
<span class="k-icon k-i-arrow-s k-panelbar-expand"></span>
</span>
<ul data-bind="foreach: children">
<li>
<span class="k-link" data-bind="text: $data,click:this.GetDSRList"></span>
</li>
</ul>
</li>
</ul>
</div>
Log off
<div id ="partialContent">
<div class="container-fluid page-host">
<!--ko compose: {
model: router.activeItem, //wiring the router
afterCompose: router.afterCompose, //wiring the router
cacheViews:true //telling composition to keep views in the dom, and reuse them (only a good idea with singleton view models)
}--><!--/ko-->
<form method="post" action="Account/LogOff" id="logoutForm" >
<input type="hidden" name="__RequestVerificationToken" data-bind="value:token"/>
</form>
</div>
</div>
</div>
</div>
Then going to the url '#/reports/list2' i have this viewmodel (list2.js) :
define(function (require) {
var shell = require('viewmodels/home/shell')
function activate() {
shell.Menus = [];
shell.Menus = [
new shell.Menu("Menu3", ["A", "B", "C"]),
new shell.Menu("Menu5", ["A", "B", "C"])
];
}
var list2 = {
activate : activate
}
return list2;
});
But the shell's menu UI does not change unless you refresh the entire page. Am I missing something here? Thnx

Answer 1

Your problem is that you create an observableArray and then wipe it out on the new view model load. You need to use the setter function for your observableArray to maintain it's connection to the DOM (please don't correct my grammar on that one, trying to KISS!!)
function activate() {
shell.Menus = ([]);
shell.Menus = ([
new shell.Menu("Menu3", ["A", "B", "C"]),
new shell.Menu("Menu5", ["A", "B", "C"])
]);
}
Simply adding the parans should fix your issue. When you are clearing use the parans, when you are setting use the parans.