Knockout.js 如何组合来自不同HTML文件的模板

由于Knockout的各个模板都保存在脚本标记中，因此我认为可以设置标记的

src

属性，并从单独的文件加载HTML。这么天真地做根本不起作用，所以

有一些技巧可以让模板绑定使用我需要使用的

src

标记

从不同的文件加载模板有不同的方法

---

（另外两种可能性——3，这个项目上的所有程序员都希望修改同一个巨大的文件，这个文件在启动时将被浏览器加载，4，对于任何比一个玩具项目更大的东西，不要使用KokOutjj-我认为是等价的。”

对于除各种“javascript”类型之外的任何类型，浏览器都不会响应

src

，并且会尝试将结果作为脚本执行

但有几种选择：

• 使用一个可以远程拉取模板的模板引擎（最好的是这里：）
• 循环包含模板的脚本标记并加载它们。类似这样的东西将使用

  src

  作为位置来提取内容。如果模板还没有准备好，那么在调用applyBindings时需要小心

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

• 这里是我之前考虑过的一些其他方法：

---

我的项目中的每个模板都是自己的html文件。我使用命名约定（*.ko.html）来识别它们。 我的构建链如下所示：

步骤1：Lint和minify*.ko.html文件 这只是为了删除注释（除了

注释），并去掉额外的空白，以获得更紧凑的负载

第2步：将精简的html字符串化并压缩为js文件。 js看起来像

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

我确实考虑过用“代码> >代码>分隔符连接到HTML文件中，但是选择了JS，因为这样可以用简单的<代码> <代码>标签代替Ajax GET +注入。 步骤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来执行这些构建步骤。（咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜咕噜）

htmlmin的选项：

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

concat的选项

{
  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没有乐趣。作为奖励，源文件可以包含将被删除的注释。 模板可以通过包含脚本标记在任何页面上重复使用：它们不需要内联到每个页面中。 生成的包是一个静态文件，浏览器可以轻松缓存，而嵌入到动态生成页面中的模板则不能。

---

捆绑javascript文件的原因与此基本相同。

嘿，您是否有一个在线存储库和一个示例，例如github？