Question

我的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是什么！？

UPDATE1： 事实上我需要手动绑定是有原因的。我希望能够选择注入的内容。类似的东西：

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');
}
...

Answer 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 });
    });
}
...

几个笔记：

撰写绑定将识别或尊重对workspaceContainer属性的后续更改。
对于视图模型模块来说，返回构造函数以使其正常工作非常重要。

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

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

Answer 2

看一下HTML绑定 -

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

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

如果您希望在HTML中包含绑定，则必须具有创造性，因为您需要在DOM中显示它们之后绑定它们。

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

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

Answer 3

假设您需要Durandal 2.0处理，请参阅撰写显式模型和视图部分中的示例三杜兰达尔的作文（http://durandaljs.com/documentation/Using-Composition/）

将你的html改为某些内容应该会让你开始。

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

手动使用Durandal Composition

3 个答案: