javascript - 加载模板时在模板内触发 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>

这是模板绑定(bind):

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

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

我怎样才能做到这一点？

Answer 1

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

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