2

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

来源

模板.html

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

执行

新模板.html

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

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

4

1 回答 1

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/

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

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

$subs然后添加一个简单的函数来在before中查找模板$base：

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/

于 2012-04-25T18:03:44.387 回答