2010-12-10 20 views
9

Ich arbeite zum ersten Mal mit mustache.js. Alle Beispiele, die ich finde, scheinen darüber zu sprechen, alles inline zu setzen, aber ich möchte meine Vorlagen in externen Dateien haben, damit sie an mehreren Stellen verwendet werden können. Wie mache ich das? (. Ich habe jQuery in meinen Stack bekam, wenn das einen Unterschied macht)Wie bekomme ich meine Template-Datei mustache.js?

Also sage ich:

template.html

{{title}} spends {{calc}} 

data.js

var data = { title: "Joe", calc: function() { return 2 + 4; } }; 

index.html

<script type="text/javascript" src="data.js"></script> 

<div id="target"></div> 

<script type="text/javascript"> 
    var template = ?????? // how do I attach the template? 
    var html = Mustache().to_html(template, data); 
    $('#target')[0].innerHTML = html; 
</script> 

Antwort

1
template = $('.template').val(); 

Wo Ihre Vorlage in der DOM ist ...

<textarea class="template"> 
<h1>{{header}}</h1> 
{{#bug}} 
{{/bug}} 

{{#items}} 
    {{#first}} 
    <li><strong>{{name}}</strong></li> 
    {{/first}} 
    {{#link}} 
    <li><a href="{{url}}">{{name}}</a></li> 
    {{/link}} 
{{/items}} 

{{#empty}} 
    <p>The list is empty.</p> 
{{/empty}} 
</textarea> 

Sie auch mehrere Vorlagen direkt in die Seite machen könnte ...

<script id="yourTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl "#yourTemplate"}} 
    <div>Something: ${TemplateValue}</div> 
</script> 
+0

Oh, wenn Sie Ihre gesamte Seite die Vorlage, die Sie war konnte Wahrscheinlich benutze $ ('body'). val(); – DaveN

+1

Aber die Vorlage ist in einer externen Datei! das ist der springende Punkt. Ich schätze, ich könnte einen Ajax-Anruf machen, um es zu bekommen, aber ich frage mich, ob es einen besseren Weg gibt .... – sprugman

+2

Ah ok, yep, ich würde AJAX raus holen und onSuccess die Antwort auf die Vorlage var zuweisen. – DaveN

Verwandte Themen