I am having some strange functionality with a virtual Knockout compose using 3 pairs of Views/ViewModels
autoAttendant.js
define(['durandal/app', 'viewmodels/settings/autoAttendant/menu'], function(app, Menu){
return function() {
var self = this;
self.attendant = ko.observable();
self.activate = function() {
self.autoAttendant(new Menu());
};
};
});
autoAttendant.html
<div id="content_pane" class="pushed_right">
<div class="content_box">
<h1>Attendant</h1>
<!-- ko compose: 'viewmodels/settings/autoAttendant/menu' --><!--/ko-->
</div>
</div>
menu.js
define(['durandal/app', 'viewmodels/settings/autoAttendant/menuItem'], function(app, MenuItem) {
return function() {
var self = this;
self.menuItems = ko.observableArray([
new MenuItem('val1', 'label1'),
new MenuItem('val2', 'label2'),
// etc...
]);
};
});
menu.html
<div class="list">
<div class="box_item master">
<!-- html content -->
</div>
<!-- ko foreach: { data: menuItems } -->
<!-- ko compose: 'viewmodels/settings/autoAttendant/menuItem' --><!--/ko-->
<!-- /ko -->
</div>
menuItem.js
define(['durandal/app'], function(app) {
var menuItem = function(val, label, active) {
var self = this;
console.log('val:', val, 'label:', label, 'active:', active); // purely for testing purposes
var _val = val || 'default_val',
_label = label || 'default_label',
_active = active || false;
self.val = ko.observable(_val);
self.label = ko.observable(_label);
self.active = ko.observable(_active);
};
return menuItem;
});
menuItem.html
<div class="level">
<div class="box_item clickable">
<!-- html content -->
</div>
</div>
Together these represent a single page within settings that displays a menu and that menu's sub-items.
Menu and MenuItem must be detached from the attendant View/ViewModel as the menu itself is recursive and a menuItem can link to a sub-menu with its own menuItems.
The problem comes in at the 2nd ko compose
. The console.log
occurs 3 times and the first 2 it shows the correct passing arguments to the MenuItem constructors in the menu.js:
val: val1 label: label1 active: undefined
At the final console.log
print out, the parameters that had been passed are overwritten like so:
val: <!-- ko compose: 'viewmodels/settings/autoAttendant/menuItem' --><!--/ko--> label: Object {model: "viewmodels/settings/autoAttendant/menuItem", bindingContext: L.b.z, activeView: null}
active: undefined
Why does this happen?
The following worked, after thorough research into the source and (more than) a little bit of experimentation:
<!-- ko compose: {view:'settings/autoAttendant/menuItem'} --><!--/ko-->