Question

我正在使用RequireJS的tpl!插件将我的模板导入并编译到我的应用程序中 - 类似于text!插件：

define([
    "tpl!../templates/newsfeed.html",
    "tpl!../templates/friends.html",
    "tpl!../templates/tag.html",
    "tpl!../templates/tags.html",
], function (renderNewsfeed, renderFriends, renderTag, renderTags) { … });

这一切都很有效，但我已经到了一个理想情况下会喜欢使用某种形式的偏见的阶段。

目前，如果我想在模板中使用模板，我必须将已编译的部分传递给我正在渲染的模板，如下所示：

$('body').append(renderTags({
    tags: tags,
    renderTag: renderTag
}));

然后，在我的模板中：

<section class="tags-list">
    <h1 class="h4 hidden">Tags</h1>
    <% _.each(tags, function (tag) { %>
        <%= renderTag({ tag: tag }) %>
    <% }); %>
</section>

如果我没有将编译后的部分传递给模板，那么它就不会找到它。

我的问题是，我怎么能做得更好？如果我在RequireJS定义中定义为依赖项的模板可用于模板本身的变量范围（全局），那么我可能不必将已编译的部分传递给模板？

其次，拥有与RequireJS一起使用的相同类型的依赖关系定义但对于模板非常好：

define([
    'tpl!../templates/tag.html'
], function (renderTag) {
    // Obviously this can't be straight HTML, but you get the idea
    <section class="tags-list">
        <h1 class="h4 hidden">Tags</h1>
        <% _.each(tags, function (tag) { %>
            <%= renderTag({ tag: tag }) %>
        <% }); %>
    </section>
});

我可能在这里完全不同的星球。如果我，请有人请解释他们如何使用模板。也许我需要切换模板引擎？

Answer 1

我提出的解决方案是在模板中实际使用require()来获取所需的部分，例如：

<%
require([
    "tpl!../templates/partials/tags.html",
    "tpl!../templates/partials/spotify-search.html",
    "tpl!../templates/partials/popup.html"
], function (renderTags, renderSpotifySearch, renderPopup) { %>
    // Template code goes here
    // Partial example:
    <%= renderTags({ tags: tags }); %>
    <%
}); %>

下划线模板 - 部分（带RequireJS）

1 个答案: