1

我想将多个模板保存在一个外部模板文件中。但我不知道如何从整个文件中获取一个模板

4

2 回答 2

3

您的模板集合需要有不同的脚本标签（作为 jsRender 的默认内联用法）。然后你可以加载集合文件，找到请求的部分并渲染它，应该以某种方式工作：（未经测试，只是理论上的）

my.renderUtils = (function () {
  // your template file (contains a set of script tags with ids)
  var templateFile = "template/file.html";
    renderTemplate = function (templateSelector, targetSelector, data) {
      $.get(templateFile, null, function (templateCollection) {
        var template = $(templateCollection).find( templateSelector ), /* find the correct part from the collection */
            tmpl = $.templates(template), /* rendering process */
            htmlString = tmpl.render(data);
        if (targetSelector) {
          $(targetSelector).html(htmlString); /* add it to your target */
        }
        return htmlString;
      });
    };
    return {
      renderExternalTemplate: renderTemplate
    };
})()

// usage 
my.renderUtils.renderExternalTemplate("yourTemplateFilePartID", "#yourTargetSelector", {yourdata:''}});
于 2013-01-26T11:02:17.200 回答
2

有两种选择。这是我以前的工作方法（后来我已经放弃了）。这本质上是 Michel 上面提到的：

$.when( $.get('<%= asset_path('t1.html') %>', null, null, 'html') ).done(function (data, status, jqXHR) {
    // data is a string.  $(data) turns into an array of HTML
    // elements.  Often it is just one but if we get them ganged
    // into one file, they will be more than one.
    $(data).each(function () {
        // We assume the outside element is just a container.  I
        // use a <script> tag but it can be anything I suppose.
        // The id of the container becomes the template's name
        // while the contents becomes the template.
        $.templates(this.id, $(this).html());
        return this;
    });
    $('.upd_apar_defs tbody').html($.render.template1({items: json_elements.items, offset: 0}));
}).fail(function (a, b, c) {
    alert('Someone is really unhappy');
});

要获取的第一个参数是 URL。这是来自使用 SASS 的 Rails 项目。asset_path 变成了 t1.html 路径的相对路径（这些都与您的问题无关——我只是在解释上面的代码在做什么）。

我已经摆脱了这一点，现在将我的模板拆分为单独的文件，然后通过 Rails 中的资产管道将它们重新组合在一起。当它们重新组合在一起时，它们通过调用 $.template 来包装，使用文件名作为模板名，文件内容作为模板本身。我大致遵循了这个：

https://github.com/erubboli/sprockets-jsrender

我重做了它，但基本上使用了他的大部分概念。结果是您刚刚加载的 javascript 文件，加载会导致它执行并定义模板。

我的逻辑是这样的：

如果您将多个模板放入同一个文件中，只需在每个模板周围放置一个小包装器，并使该文件成为纯 javascript 文件，即使它看起来主要是 html 和 js-render。这并不难，编辑器可以很容易地处理它，并且相对清楚你在做什么。

然后，您可以利用拥有纯 JavaScript 文件的所有好处，例如通过头部中的标签加载它、在客户端缓存它、压缩它等。模板已准备好在页面加载时摇滚节省额外的提取。

高温高压

于 2013-01-26T17:53:26.760 回答