1

我在从 Knockout 的模板绑定过渡到 Durandal 组合绑定时遇到了一些困难。

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

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)
                ]);

然后，当我想展示一个时，我会将其放入活动的 observable 中：

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

当我更改为 compose 绑定时，似乎 Durandal 找不到我的 ViewModel 的关联视图，因为我正在绑定模型的实例而不是 ViewModel 本身的构造函数。换句话说，

self.selectedTabSection(BasicTabViewModel);

找到合适的视图，而

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

才不是。

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

编辑/更新：

看起来这与我如何组成我的孩子 ViewModels 有关。当您从 ViewModel 的构造函数返回对象时，Durandal 似乎有问题。

这似乎按预期工作：

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

而这：

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

才不是。关于从构造函数返回对象的一些事情会使 DurandalJS 在尝试定位 View 时迷失方向，并且还会弄乱各种范围。我正在考虑重新编写我的脚本以适应，但是这种从构造函数返回对象的模式对我来说很好（在 Durandal 之前）很好奇......

4

1 回答 1

2

这有效的原因 -

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

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

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

现在您可以像这样在父视图中绑定到这些 -

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

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

于 2014-01-15T23:40:59.720 回答