在没有复杂引擎的情况下从外部文件加载淘汰赛模板? [英] Load knockout template from external file without complex engine?

问题描述

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

模板.html

index.html

<脚本>$(document).ready(function() {$("#templateContainer").load("templates.html");}

这行得通吗?有什么陷阱"吗?

解决方案

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

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

这是我使用此功能的示例:

self.loadPage = function () {如果(！self.isLoaded()){loadTemplateCollection('上传向导', function() {self.isLoaded(true);self.uploadWizard();});}}

您的视图看起来像这样(if 很重要):

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

I've found engines, plugins and functions to load external templates, but I'm wondering if there's a simpler way to do it. Something like this?

templates.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>

Will this work? Are there any "gotchas"?

解决方案

Here's what I use to load a template file that contains a collection of templates:

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

Here's an example where I use this function:

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

Your view would look something like this (the if is important):

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

这篇关于在没有复杂引擎的情况下从外部文件加载淘汰赛模板?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！