Question

我知道有更好的模式，但在这种情况下，我们希望将一些遗留代码转移到视图中。这个html有一个

<script src="binding.js"></script>

需要在页面呈现和显示后运行。

我希望使用<script src="">标记来执行此操作，但标记似乎已被删除。

我们如何让脚本标记呈现，或者使用durandal进行解决？

示例html：

<div>
    <link rel="stylesheet" href="/Content/stylesheet1.css"/>
    <link rel="stylesheet" href="/Content/stylesheet2.css"/>
    <header>
        <h1>heading</h1>
        <h2>sub heading</h2>
    </header>

    <section>
    </section>

    <footer>              
    </footer>
    <script src="dobinding.js"></script>    
</div>

这很有帮助：

http://knockoutjs.com/documentation/custom-bindings.html

Answer 1

你可以使用自定义KnockOut绑定。

这是一个非常简单的绑定 - 请记住这只是一个想法：

ko.bindingHandlers.script = {
    update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var scriptName = ko.utils.unwrapObservable(valueAccessor());
        $(element).html("<script src='" + scriptName + "'></script>");
    }
};

在您的视图中（.html文件）：

<div data-bind="script:'dobinding.js'"></div>

我测试了这个，我发现脚本确实被注入，解析和执行，但它不会在DOM中保持加载状态。这对您来说可能是也可能不是问题。

似乎剥离标签可能是Durandal特定的事情。我还没有想出原因，但如果我有机会深入研究它，我会更新。

Answer 2

我相信durandal视图合成引擎只使用视图中的第一个html元素而忽略其他所有内容。因此，如果您的脚本标记位于视图中的主容器之外，我认为它会被删除。

你可以发布一些html / js进行审核吗？

Answer 3

如果还没有，你可以在函数中包装脚本内部的任何内容（让我们称之为doBindings），然后将脚本嵌入index.html文件（或等效文件），以及Knockout，JQuery等。< / p>

然后，在运行所需的任何视图中，将viewAttached方法添加到视图模型并调用doBindings：

activate: function() {
   ...
}
viewAttached: function() {
   doBindings();
}

这将在加载视图并且可以访问DOM时调用该函数。

这里的解决方案：Insert script tag in Durandal，但这里的答案可以为我节省一些额外的搜索，所以也在这里添加。

如何阻止durandal / jquery从视图中删除脚本标记？

3 个答案: