Question

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

在我的旧项目中，我有一个选项卡列表，可以通过将它们放入“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)
                ]);

然后，当我想要展示一个时，我会将它放入活动的可观察状态：

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

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

self.selectedTabSection(BasicTabViewModel);

找到合适的视图，而

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

没有。

如何让viewLocator理解我正在传递一个实例而不是ViewModel构造函数？如果我不能，我如何将参数传递给我的子视图，因为它们在组成之前尚未初始化？

EDIT / UPDATE：

看起来这与我如何编写我的孩子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之前）Curious ......

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

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

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>

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

DurandalJS和用参数组合子视图

1 个答案: