javascript - ViewModel コンストラクターを使用したノックアウト仮想構成

Question

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());
        };
    };
});

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>

これらを合わせて、メニューとそのメニューのサブ項目を表示する設定内の 1 つのページを表します。

メニュー自体は再帰的であり、menuItem は独自の menuItem を持つサブメニューにリンクできるため、 Menu と MenuItemは付属の View/ViewModel から切り離す必要があります。

問題は 2 番目に出てきko composeます。これconsole.logは 3 回発生し、最初の 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

なぜこれが起こるのですか？