Templates 使用带淘汰的外部模板的最佳方法_Templates_Knockout.js_Knockout 2.0

Templates 使用带淘汰的外部模板的最佳方法

templates knockout.js

Templates 使用带淘汰的外部模板的最佳方法,templates,knockout.js,knockout-2.0,Templates,Knockout.js,Knockout 2.0,我用一些内部模板构建了一个html页面。请参阅url JSFIDLE：使模板外部化的最佳方法是什么？如何实现问候,， Kenneth在我看来，最好的方法是使用这个插件：它启用了一个新的模板引擎，可以从外部文件中提取模板。它还有一些配置选项来确定从何处提取模板。我编写了一个加载模板的函数，除了jQuery之外没有任何依赖项。必须使用属性数据模板src标记要动态加载的每个标记，并将HTML文件的路径放在那里。下面是代码和示例警告：由于它使用AJAX加载模板，因此需要HTTP服务器（它不能在

我用一些内部模板构建了一个html页面。请参阅url JSFIDLE：

使模板外部化的最佳方法是什么？如何实现

问候,，

Kenneth

在我看来，最好的方法是使用这个插件：

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

我编写了一个加载模板的函数，除了jQuery之外没有任何依赖项。必须使用属性

数据模板src

标记要动态加载的每个

标记，并将HTML文件的路径放在那里。下面是代码和示例

警告：由于它使用AJAX加载模板，因此需要HTTP服务器（它不能在本地使用

文件：//

协议）

/main.js /index.html

/assets/examplemplate.html

你好，世界

/assets/exampleSubTemplate.html

你好吗？

谢谢Ryan，所以我必须把它放在我的HTML中：然后我可以制作外部模板文件。我必须使用jquerytmpl还是只能使用模板引擎？你知道（在Fiddle中）是否有上述方法的例子吗？如果你使用

\u all.js

版本，那么你不需要TrafficCop或infuser，因为它们包括在内。否则，你是对的。不确定是否有问题，因为AJAX部分很难伪造。不过，存储库中有一个例子，您也不需要使用jQuery模板。您可以使用本机模板。

// 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"));
});

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

<h1>Hello world</h1>

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

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