手动使用 Durandal 合成答案

【问题标题】：Using Durandal Composition manually手动使用 Durandal 合成
【发布时间】：2013-08-22 09:49:48
【问题描述】：

我的 html 中有一个空容器，例如：

<div id='workspace-container'></div>

我想手动创建我的模型并用一些视图组合它，然后使用 javascript 将结果注入#workspace-container：

var myViewModel = new ViewModel (param1, param2);
// Doing some actions on myViewModel

// Some MAGIC here:
composition.compose(myViewModel, myView, '#workspace-container');

有什么 api 可以做这样的魔法！？

更新1： 事实上，我需要手动绑定是有原因的。我希望能够选择要注入的内容。比如：

if (condition1) {
    var myViewModel1 = new ViewModel1 (param1, param2);
    composition.compose(myViewModel1, myView1, '#workspace-container');
}
else if (condition2) {
    var myViewModel2 = new ViewModel2 (param1, param2);
    composition.compose(myViewModel2, myView2, '#workspace-container');
}
...

【问题讨论】：

标签： knockout.js knockout-2.0 single-page-application durandal hottowel

【解决方案1】：

您描述的方式可以通过在主视图模型上创建一个属性来公开您尝试组合的视图模型。如果不手动指定视图，视图定位器将用于查找指定视图模型的视图。

那么绑定看起来像这样：

//in your view
<div id='workspace-container` data-bind='compose: workspaceContainer'></div>

//in your main view model expose the sub view model property property
var self = this;
this.workspaceContainer = ko.observable();

//later
var v, vm;
if ('condition1') {
    system.acquire("viewModels/viewModelForCondition1").done(function (modelCtor) {
        v = "views/viewModelForCondition1.html";
        vm = new modelCtor(param1, param2);
        self.workspaceContainer({ view: v, model: vm });
    });
} else {
    system.acquire("viewModels/viewModelForCondition2").done(function (modelCtor) {
        v = "views/viewModelForCondition2.html";
        vm = new modelCtor(param1, param2);
        self.workspaceContainer({ view: v, model: vm });
    });
}
...

几个笔记：

compose 绑定将识别或遵守对workspaceContainer 属性的后续更改。
您的视图模型模块返回一个构造函数以使其正常工作很重要。

有关详细信息，请参阅此链接中的组合显式模型和视图部分：http://durandaljs.com/documentation/Using-Composition/

此代码使用 Durandal 2.0 的预发布版本进行测试。如果有问题，请告诉我，我会改正的。

【讨论】：

这很好。但我也需要动态选择视图。我刚刚更新了问题以澄清我的确切问题。
那太好了。事实上，我已经找到了使用composition.compose(element, model); 的解决方案。但是您的解决方案似乎更方便。

【解决方案2】：

看看 HTML 绑定 -

http://knockoutjs.com/documentation/html-binding.html

这将允许您直接创建一个包含 HTML 标记的 observable。与往常一样，请确保不要将您的视图暴露给 HTML 注入。

如果您想在 HTML 中进行绑定，则必须要有创意，因为您需要在它们在 DOM 中可见后绑定它们。

另一种选择可能是使用内置模板绑定，但它不会为您提供传统的 HTML 注入，但可能是您正在寻找的更多内容。

http://knockoutjs.com/documentation/template-binding.html

【讨论】：

我需要的是手动绑定。我已经更新了我的问题以澄清我的确切问题。谢谢。

【解决方案3】：

假设您希望 Durandal 2.0 处理此问题，请查看 组合显式模型和视图部分的示例三 Durandal 作曲 (http://durandaljs.com/documentation/Using-Composition/)

将您的 html 更改为类似的内容应该可以开始了。

<div id="workspace-container" 
     data-bind="compose: { model:myViewModel, view:myView }">
</div>

【讨论】：

我需要的是手动绑定。我已经更新了我的问题以澄清我的确切问题。谢谢。