0

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

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

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

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

3 回答 3

4

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

然后绑定看起来像这样：

//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 的预发布版本进行测试。如果有问题，请告诉我，我会纠正它们。

于 2013-08-20T12:12:04.903 回答
0

看一下 HTML 绑定 -

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

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

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

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

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

于 2013-08-20T11:54:33.870 回答
0

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

将您的 html 更改为沿线的内容应该可以开始。

<div id="workspace-container" 
     data-bind="compose: { model:myViewModel, view:myView }">
</div>
于 2013-08-20T11:59:22.303 回答