Unders Templating - Partials (mit RequireJS)

Question

ich die tpl! Plugin verwenden für RequireJS meiner Vorlagen in meine Anwendung zu importieren und kompilieren - ähnlich die text! Plugin:

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

Das alles funktioniert gut, aber ich habe zu einem Stadium, in dem ich idealerweise gerne eine Form von Teiltönen verwenden würde.

Derzeit wenn ich eine Vorlage in einer Vorlage verwenden möchten, würde ich die kompilierte teilweise auf die Vorlage passieren muss ich machen, etwa so:

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

Dann In meiner Vorlage:

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

Wenn ich die kompilierte Teil nicht auf die Vorlage übergeben, dann wird es nicht finden.

Meine Frage ist, wie könnte ich das besser machen? Wenn die Vorlagen, die ich als Abhängigkeiten in meiner RequireJS-Definition definiert habe, für den Variablenbereich der Vorlagen selbst (global) verfügbar wären, würde ich die kompilierte Teildatei wahrscheinlich nicht an die Vorlage übergeben müssen.

Zweitens wäre es wirklich schön, die gleiche Art von Abhängigkeitsdefinitionen zu haben, die mit RequireJS verfügbar sind zu verwenden, aber für Vorlagen:

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

ich auf einem ganz anderen Planeten hier sein könnte. Wenn ich bin, würde jemand bitte bitte erklären, wie sie Vorlagen verwenden. Vielleicht muss ich Templating Engine wechseln?

Answer 1

Die Lösung, die ich komme mit tatsächlich require() in der Vorlage verwenden sollte, um die erforderlichen partials zu holen, zum Beispiel:

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