8

由于 Knockout 的各个模板都保存在脚本标签中，我认为我可以设置src标签的属性并从单独的文件中加载 HTML。天真地这样做根本行不通，所以要么

  1. 有一些技巧可以让模板的绑定与src我需要使用的标签一起使用
  2. 从不同的文件加载模板有不同的方法

（另外两种可能——3，这个项目的所有程序员都应该修改同一个巨大的文件，该文件将在启动时由浏览器加载，4，不要将 Knockoutjs 用于比玩具更大的东西项目——我认为是等价的。）

4

2 回答 2

11

浏览器不会响应src任何类型不是各种“javascript”类型之一的类型，并且它会尝试将结果作为脚本执行。

虽然有几个选择：

  • 使用可以远程拉取模板的模板引擎（最好的在这里：https ://github.com/ifandelse/Knockout.js-External-Template-Engine ）。

  • 在包含模板的脚本标签上循环并加载它们。像这样的东西会使用src作为位置的内容。如果您的模板尚未准备好，您在调用 applyBindings 时需要小心。

    $("script[type='text/html']").each(function(index, el) { $.get($(el).attr("src"),
    function(response) {
        $(el).text(response); });
});

  • 以下是我不久前考虑过的一些其他选项：http ://www.knockmeout.net/2011/03/using-external-jquery-template-files.html

于 2012-05-01T19:14:12.247 回答
1

我项目中的每个模板都是它自己的 html 文件。我使用命名约定 (*.ko.html) 来识别它们。我的构建链是这样的：

第 1 步：Lint 和缩小 *.ko.html 文件 这只是为了删除注释（除了注释<!-- ko -->）并去除额外的空白以获得更紧凑的有效负载。

第 2 步：将压缩后的 html 字符串化并连接到 js 文件中。 js看起来像 

var templates={
  'name1':'some stringified html',
  'name2':'some more'
};

我确实考虑过用分隔符连接成一个 html 文件，<script type="text/plain">但选择了 js，因为这样可以使用简单的<script>标签而不是 ajax get + injection 来加载它。

第 3 步：修复原生模板引擎以从我的 js 对象中检索模板。

var engine = new ko.nativeTemplateEngine();
engine._makeTemplateSource = engine.makeTemplateSource;

engine.makeTemplateSource = function (template, doc) {        
    if (typeof (template) === 'string' && templates[template]) {
        return { text: function () { return templates[template]; } };
    }
    return engine._makeTemplateSource(template, doc);
};
ko.setTemplateEngine(engine);

我的实现使用 gruntjs 来执行这些构建步骤。(grunt-contrib-htmlmin, grunt-contrib-concat)

htmlmin 的选项：

{
removeComments: true, 
collapseWhitespace: true, 
ignoreCustomComments: [/^\s*ko /, /^\s*\/ko /] 
}

连接选项

{
  stripBanners: true,
  banner: "(function(t){",
  footer: "})(window.templates || (window.templates={}));",
  process: function (src, file) {
      return 't[\'' + file.replace(/^.*\//, '').replace('.ko.html', '') + '\']=' + JSON.stringify(src) + ';';
  }
}

对于任何想知道为什么有人想要这样做的人：模板源文件是标准的单个 html 文件，可以在任何 html 编辑器中进行编辑，并且可以对其进行源代码控制。在标签内编辑 html<script>并不好玩。作为奖励，源文件可以包含将被删除的注释。通过包含脚本标签，模板可以在任何页面上重复使用：它们不需要内联到每个页面中。生成的包是浏览器可以轻松缓存的静态文件，而嵌入到动态生成的页面中的模板则不能。捆绑javascript文件的原因几乎相同。

于 2015-07-15T22:05:30.557 回答