/main.js

Question

我已经构建了一个包含一些内部模板的html页面。见url jsfiddle：

http://jsfiddle.net/hoven002/jQTDH/

将模板制作成外部的最佳方法是什么？如何？

此致肯尼斯

Answer 1

在我看来，最好的方法是使用这个插件：https://github.com/ifandelse/Knockout.js-External-Template-Engine。

它启用了一个新的模板引擎，可以从外部文件中提取模板。它还有一些配置选项，用于确定模板的放置位置。

Answer 2

我编写了一个加载模板的函数，除了jQuery之外没有任何依赖。您必须使用属性<script>标记要动态加载的每个data-template-src标记，并将HTML文件的路径放在那里。以下是代码和示例。

警告：由于它使用AJAX加载模板，因此它需要一个HTTP服务器（它不能在本地使用file://协议）

/main.js

// Loads all the templates defined with the tag data-template-src.
// Returns a promise that fulfills when all the loads are done.
function loadTemplates() {
    var templateLoads = [];

    $('[data-template-src]').each(function () {
        var templateElement = $(this);
        var templateUrl = templateElement.attr('data-template-src');

        // Load the template into the element and push the promise to do that into the templateLoads array
        templateLoads.push(
            $.get(templateUrl)
            .done(function (data) {
                templateElement.html(data);
            })
        );
    });

    return $.when.apply($, templateLoads);
}

// When all templates are loaded, apply bindings
loadTemplates().done(function () {
    ko.applyBindings({}, document.getElementById("htmlDoc"));
});

/index.html

<html id="htmlDoc">
  <body>
    <div data-bind="template: { name: 'exampleTemplate' }"></div>
    <script type="text/html" id="exampleTemplate" data-template-src="/assets/exampleTemplate.html"></script>

    <script src="/jquery.js"></script>
    <script src="/knockout.js"></script>
    <script src="/main.js"></script>
  </body>
</html>

/assets/exampleTemplate.html

<h1>Hello world</h1>

<div data-bind="template: { name: 'exampleSubTemplate' }"></div>

/assets/exampleSubTemplate.html

<h2>How do you do?</h2>

使用外部模板与淘汰赛的最佳方法

2 个答案:

/main.js

/index.html

/assets/exampleTemplate.html

/assets/exampleSubTemplate.html