在没有复杂引擎的情况下从外部文件加载淘汰赛模板？答案

【问题标题】：Load knockout template from external file without complex engine?在没有复杂引擎的情况下从外部文件加载淘汰赛模板？
【发布时间】：2017-05-17 03:00:23
【问题描述】：

我找到了加载外部模板的引擎、插件和函数，但我想知道是否有更简单的方法可以做到这一点。像这样？

模板.html

<script id="testTemplate" type="text/html">
 <div>this is a div</div>
</script>

index.html

<div id="templateContainer"></div>
<script>
    $(document).ready(function() {
         $("#templateContainer").load("templates.html");
    }
</script>

这行得通吗？有什么“陷阱”吗？

【问题讨论】：

标签： templates knockout.js

【解决方案1】：

这是我用来加载包含模板集合的模板文件的内容：

var loadTemplateCollection = function(file, success) {
    $.get('templates/' + file + '.html', function(templates) {
        $('body').append('<div style="display:none">' + templates + '<\/div>');
        success();
    });
};

这是我使用此函数的示例：

self.loadPage = function () {
    if (!self.isLoaded()) {
        loadTemplateCollection('uploadwizard', function() {
            self.isLoaded(true);
            self.uploadWizard();
        });
    }
}

您的视图看起来像这样（if 很重要）：

<div data-bind="template: {'if': isLoaded, name: 'uploadwizard', data: wizard}"></div>

【讨论】：

templates 变量在loadTemplateCollection 中包含什么？脚本元素？
它们是<textarea> 元素。

【解决方案2】：

这是我用来加载新页面视图的。我认为使用起来非常简单：

var template = 'template.html';
var targetID = 'container';
var partialVM = {data : 1};

var load = function (template, targetID, partialVM) {
    $.ajax(template, { async: false })
        .success(function (stream) {
            $('#' + targetID).html(stream);
            ko.applyBindings(partialVM, document.getElementById(targetID));
        }
    );
};

但在我的 html 模板中，我没有 script 元素，只是一个简单的 div 作为根元素。

希望对你有帮助。

【讨论】：

【解决方案3】：

我创建了一个新的绑定来从 url 加载 html 并对其应用绑定

ko.bindingHandlers.htmlUrl = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        $(element).load(valueAccessor(), function () {
            $(element).children().each(function (index, child) {
                ko.applyBindings(bindingContext.$data, child);
            });
        });
    },
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {

    }
};

用法

        <div data-bind="htmlUrl : <url>">


        </div>

【讨论】：

【解决方案4】：

我终于能够在绑定处理程序的帮助下拼凑出一个惰性模板加载器。想分享。

懒加载器

markupLoader = {
    templateDictionary: {},
    loadMarkup: function (element, value, bindingContext) {
        if (!this.templateDictionary[value]) {
            this.templateDictionary[value] = $.get(value);
        }
        this.templateDictionary[value].done(function (template) {
            $(element).html(template);
            $(element).children().each(function (index, child) {
                ko.applyBindings(bindingContext, child);
            });
        });
    }
};

绑定处理程序

ko.bindingHandlers.htmlUrl = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        let value = ko.unwrap(valueAccessor());
        markupLoader.loadMarkup(element, value, bindingContext);
        return { controlsDescendantBindings: true };
    }
};

【讨论】：

谢谢！你是最好的。