将动态 html 插入到 durandal 视图中答案

【问题标题】：inserting dynamic html into durandal views将动态 html 插入到 durandal 视图中
【发布时间】：2013-05-31 02:10:20
【问题描述】：

我在 durandal 视图中动态插入 html，但它不起作用，任何人都可以帮助我吗？我的示例 html 是

在硬脑膜视图中

<div data-bind="foreach:arrayofmodels">
    <div data-bind="html:dynamichtml"/>
  </div>

在我要插入动态 html 的模型（不是视图模型）中

dynamichtml(<span data-bind="click:Mymodelclickfunction"/>);

在我的视图模型中

    var arrayofmodels=ko.observableArray();
     vm={
         arrayofmodels:arrayofmodels;
       }
return vm;

有一个单独的函数来获取模型对象列表并将它们推送到 arrayofmodels 数组中。

我知道问题是在应用绑定后插入 html，但是如何解决这个问题？

【问题讨论】：

如何插入html？您可以发布更多上下文吗？您的示例甚至不是有效的数据绑定表达式。你是说data-bind="text: viewmodelProperty"吗？
@nemesv：谢谢你的评论，更新了问题！

【解决方案1】：

更新：

您是否考虑过为此目的使用 Durandal 的撰写机制？假设模型返回一个带有 Mymodelclickfunction 属性的构造函数，下面的内容应该可以帮助您入门。

model.js

define(function() {
    return function() {
        this.Mymodelclickfunction = function(){
           //...
        }
    };
});

model.html

<div>
    <span data-bind="click:Mymodelclickfunction"/>
</div>

根据评论更新 durandal 观点

<div data-bind="foreach:arrayofmodels">
    <!-- ko compose: $data -->
    <--/ko -->
</div>

【讨论】：

Durandals compose 对于从另一个文件注入 HTML 来说是一个非常糟糕的解决方案。它插入了一个额外的 div，因此不能用于例如将文件中的 TD 注入表行，它比普通的 ko 模板慢，并且与上下文混淆，例如表行上下文成为整个绑定上下文视图不能轻易引用父上下文的方式。 Compose 很棒，但不是为了这个目的。上面的 durandal 视图有错字，缺少 : after compose:
更好的解决方案是ko外部模板引擎，见这里：github.com/ifandelse/Knockout.js-External-Template-Engine