javascript - 扩展 HTML 模板？

Question

我正在创建一个网络应用程序框架，供我部门的其他团队使用，以标准化我们网络应用程序的用户界面。它是通过 underscore.js 使用 HTML 模板用 javascript 编写的。但是，为了使应用程序完全可扩展，我希望他们能够在不修改源代码的情况下按他们认为合适的方式扩展 HTML 模板。

---

来源

templates.html

...
<script type="text/template" id="fooTemplate">
  <div class="foo">
  </div>
</script>
<script type="text/template" id="barTemplate">
  <p>Bar!</p>
</script>
...

实现

newTemplates.html

...
<!-- Only overwrite foo, not bar !-->
<script type="text/template" id="fooTemplate">
  <ul class="foo">
    <li class="bar">Blah!</li>
  </ul>
</script>
...

---

有没有一种方法可以让用户直观地扩展 HTML 模板，而不用强制他们覆盖文件并复制/粘贴他们没有修改的模板？

Answer 1

如果没有一堆服务器端处理来处理唯一性问题，您将无法使用 id 属性来识别您的模板。但是您可以使用类来识别您的模板。

如果您按覆盖顺序将所有模板 HTML 文件混合在一起(“基本”模板在前，“子模板”在后)并使用 class 属性来标识模板:

<!-- templates.html -->
<script type="text/template" id="fooTemplate">
  <div class="foo">
  </div>
</script>
<script type="text/template" id="barTemplate">
  <p>Bar!</p>
</script>
<!-- newTemplates.html -->
<script type="text/template" id="fooTemplate">
  <ul class="foo">
    <li class="bar">Blah!</li>
  </ul>
</script>

然后你可以使用类似的东西

var foo = _.template($('.fooTemplate:last').html());
var bar = _.template($('.barTemplate:last').html());

访问您的模板。

演示:http://jsfiddle.net/ambiguous/gYHkF/

---

您也可以坚持使用 id 并尝试先从 newTemplates.html 加载模板，如果不这样做则回退到 templates.html找到它。如果您将模板文件加载到两个单独的变量中，但不将它们插入到 DOM 中:

var $base = $('stuff from templates.html');
var $subs = $('stuff from newTemplates.html');

然后在$base之前添加一个简单的函数在$subs中查找模板:

function tmpl(id) {
    var $t = $subs.filter('#' + id);
    if($t.length)
        return _.template($t.html());
    return _.template($base.filter('#' + id).html());
}

然后你可以这样做:

var foo = tmpl('fooTemplate');
var bar = tmpl('barTemplate');

然后正确的事情就会发生。

演示:http://jsfiddle.net/ambiguous/EhhsL/

这种方法还可以很容易地缓存已编译的模板，不仅可以避免重复查找，还可以避免一遍又一遍地编译相同的东西:

function tmpl(id) {
    if(tmpl.cache.hasOwnProperty(id))
        return tmpl.cache[id];
    var $t = $subs.filter('#' + id);
    if($t.length)
        return tmpl.cache[id] = _.template($t.html());
    return tmpl.cache[id] = _.template($base.filter('#' + id).html());
}
tmpl.cache = { };

演示:http://jsfiddle.net/ambiguous/YpcJu/