Question

HTML脚本标记可用于定义命名模板：

  <script type="text/html" id="Lookup">
    <label class="field-title" data-bind="text: Metadata.FieldTitle, css: { hasError: !IsValid() }"></label>
    <div data-bind="html: Metadata.FieldIntro"></div>
    <select class="form-control" data-bind="attr: { id: 'ff' + Metadata.FormFieldID }, options: Lookup, optionsText: 'Caption', optionsValue: 'Id', optionsCaption: Metadata.FieldIntro || 'Select an item...', value: Value, css: { hasError: !IsValid() }"></select>
  </script>

根据MDN和msdn，我应该能够将模板的内容移动到文件中并像这样引用它：

<script type="text/html" id="Lookup" src="Lookup.html"></script>

根据Fiddler模板文件正在加载（我有几个）。当模板不是内联时，什么阻止使用模板，并且有什么可以做的吗？

从注释中，脚本标记不会解析它们加载到DOM中的内容。我可以使用像jQuery ajax这样的东西来加载，解析和注入但是knockout使用脚本节点的id来引用模板，所以下一个问题是如何让片段如此加载可见。

我猜测我需要做这样的事情：

$(document.body)
.append("<div id='Lookup' style='display:none'></div>")
.load("Templates/Lookup.html" );

关闭，但没有雪茄。在这里它被纠正并包装成一个函数：

function loadTemplate(name) {
  if (name)
    switch (name.constructor) {
      case String:
        $(document.body).append("<div id='" + name + "' style='display:none'></div>");
        $("#" + name).load("Templates/" + name + ".html");
        break;
      case Array:
        name.map(loadTemplate);
        break;
      default:
        throw "Must be a string or an array of strings";
    }
}

您可以传递单个模板名称或名称数组。 Knockout愉快地使用模板。

Answer 1

浏览器不知道如何处理用text/html编写的程序（是的，这句话没有多大意义，这是你正在使用的黑客攻击）。

用于处理模板的任何JavaScript都是读取DOM中script元素的子节点。尚未编写该文件来检查src属性并加载外部内容。

为什么src不适用于模板？

1 个答案: