javascript - DurandalJS 和使用参数组合 subview

Question

我在从 Knockout 的模板绑定(bind)转换到 Durandal compose 绑定(bind)时遇到了一些困难。

在我的旧项目中，我有一个选项卡列表，可以通过将它们放入可观察到的“selectedTabSection”来交换到中心舞台。 templateId 是 subview 的属性。所以在我的父 View 中，我创建了我的子模型的实例，如下所示:

self.tabSections([
                    new BasicTabViewModel(self, db),
                    new BiometricTabViewModel(self, db),
                    new ActivityTabViewModel(self, db),
                    new SurveyTabViewModel(self, db),
                    new CommunicationTabViewModel(self, db),
                    new ReferralTabViewModel(self, db),
                    new GoalTabViewModel(self, db),
                    new NcpTabViewModel(self, db),
                    new CriticalValuesViewModel(self, db),
                    new ConditionManagement(self, db)
                ]);

然后当我想展示一个时，我会把它放到事件的可观察对象中:

self.selectedTabSection(self.tabSections()[0]);

当我更改为组合绑定(bind)时，Durandal 似乎无法为我的 ViewModel 找到关联的 View ，因为我绑定(bind)的是模型的实例而不是 ViewModel 本身的构造函数。换句话说，

self.selectedTabSection(BasicTabViewModel);

找到合适的 View ，而

self.selectedTabSection(new BasicTabViewModel(self, db));

没有。

如何让 viewLocator 知道我传递的是一个实例而不是 ViewModel 构造函数本身？如果我不能，我该如何将参数传递给我的 subview ，因为它们在组合之前没有被初始化？

编辑/更新:

看起来这与我构建子 ViewModel 的方式有关。当您从 ViewModel 的构造函数返回对象时，Durandal 似乎有问题。

这似乎按预期工作:

var viewModel = function (parentVm, db) {
    var self = this;
} 

鉴于此:

var viewModel = function(parentVm, db){
     var self = this;
     //public api
     return {};
}

没有。关于从构造函数返回对象的一些事情使 DurandalJS 在尝试定位 View 时迷路，并且还会弄乱各种范围。我正在考虑重写我的脚本以适应这种情况，但是这种从构造函数返回对象的模式已经为我服务了很多个月(在 Durandal 之前)好奇...

Answer 1

这有效的原因 -

var viewModel = function (parentVm, db) {
    var self = this;
}

虽然这不是 -

var viewModel = function(parentVm, db){
     var self = this;
     //public api
     return {};
}

是因为您正在删除您的函数为创建对象所做的一切。

考虑这个 -

function newModule (path, params){
     var self = this;
     self.modulePath = path;
     self.activationData = params;
}

现在您可以创建此匿名函数的实例并将参数传递给您想要将 View / View 模型绑定(bind)到的参数。

var theseChildViewModels = ko.observableArray();
var someData = getDataFromSomewhere();
theseViewModels.push(new newModule('viewmodels/myViewModelOne', { data: someData }));
theseViewModels.push(new newModule('viewmodels/myViewModelTwo', { data: someData }));

现在你可以像这样在你的父 View 中绑定(bind)它们 -

<ul data-bind="foreach: theseChildViewModels">
    <li>
        <!-- ko compose: { model: modulePath, activationData: activationData} -->
        <!-- /ko -->
    </li>
</ul>

并动态声明您的路径以及在合成期间将哪些数据传递到激活回调中。