加载模板时在模板中触发javascript？

Question

我正在使用这个功能（在 SO 上找到）来加载模板：

var loadTemplates = function (list) {
    var deferred = new $.Deferred();
    var loadedTemplates = [];
    ko.utils.arrayForEach(list, function (name) {
        $.get("templates/" + name + ".html", function (template) {
            $("body").append("<script id=\"" + name + "\" type=\"text/html\">" + template + "<\/script>");
            loadedTemplates.push(name);
            if (list.length === loadedTemplates.length) {
                deferred.resolve(true);
            }
        });
    });
    return deferred.promise();
}

我是这样称呼它的：

       loadTemplates(['template1','template2']).then(function () {
            $.publish("templates_loaded");
        })

我在包含的 js 文件中成功订阅了 templates_loaded，但现在我想在模板中包含一些 js。这是我所拥有的：

<div id="test" data-bind="text: alarmIDs().length">Test</div>

<script>
    $.subscribe("templates_loaded", function () {
        alert('test');
    });
</script>

这里是模板绑定：

<span data-bind="template: 'template1'"></span>

我确实看到了“测试”元素，但它从不触发警报。

我怎样才能做到这一点？

Answer 1

当模板的 HTML 转换为 DOM 元素时，模板中的 JS 将运行。当您加载模板时，您不会将 HTML 作为 DOM 元素添加到 DOM 中，而是将其作为文本添加到 <script type="text/html"> 中。浏览器不会“看到”模板中的代码作为可运行代码，因为它没有解析它。当您实际渲染模板并使用它来生成代码（使用 KO、下划线或你有什么）时，就会发生这种情况。

更新：这似乎是 Knockout 的一个限制：模板内的脚本标签在执行时插入。您可以使用另一个模板引擎（或简单地使用 jQuery 来渲染您的模板）在渲染时执行脚本。