CODEWITHSUNDEEP
javascriptrequirejstemplatingpartialsunderscore.js
user1082754
user1082754

Reputation:

Underscore Templating - Partials (with RequireJS)

I am using the tpl! plugin for RequireJS to import and compile my templates into my application - similar to the text! plugin:

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

This all works great, but I have got to a stage where I would ideally like to use some form of partials.

Currently, if I want to use a template inside a template, I would have to pass the compiled partial to the template I am rendering, like so:

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

Then, In my template:

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

If I do not pass the compiled partial onto the template, then it's not going to find it.

My question is, how could I do this better? If the templates I defined as dependencies in my RequireJS definition were available to the variable scope of the templates themselves (globally), then I probably wouldn't have to pass the compiled partial to the template?

Secondly, it would be really nice to have the same kind of dependency definitions that are available to use with RequireJS but for templates:

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>
});

I might be on a completely different planet here. If I am, would somebody please kindly explain how they use templates. Perhaps I need to switch templating engine?

Upvotes: 2

Views: 1662

Answers (1)

user1082754
user1082754

Reputation:

The solution I come up with was to actually use require() inside the template, to fetch the required partials, for example:

<%
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 }); %>
    <%
}); %>

Upvotes: 1

Related Questions