我在使用 3 对 Views/ViewModels 的虚拟 Knockout 组合中具有一些奇怪的功能
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());
};
};
});
自动话务员.html
<div id="content_pane" class="pushed_right">
<div class="content_box">
<h1>Attendant</h1>
<!-- ko compose: 'viewmodels/settings/autoAttendant/menu' --><!--/ko-->
</div>
</div>
菜单.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...
]);
};
});
菜单.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>
菜单项.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;
});
菜单项.html
<div class="level">
<div class="box_item clickable">
<!-- html content -->
</div>
</div>
这些一起代表设置中的单个页面，该页面显示菜单和该菜单的子项。
Menu 和 MenuItem必须与伴随的 View/ViewModel 分离，因为菜单本身是递归的，并且 menuItem 可以链接到具有自己的 menuItems 的子菜单。
问题出现在第二个ko compose。发生 3次console.log，前 2 次显示正确传递给 menu.js 中的 MenuItem 构造函数的参数：
val: val1 label: label1 active: undefined
在最终console.log打印输出时，已传递的参数将被覆盖，如下所示：
val: <!-- ko compose: 'viewmodels/settings/autoAttendant/menuItem' --><!--/ko--> label: Object {model: "viewmodels/settings/autoAttendant/menuItem", bindingContext: L.b.z, activeView: null}
active: undefined
为什么会这样？