如何获得我的mustache.js模板文件?

时间:2010-12-10 20:31:58

标签: javascript jquery mustache

我第一次使用mustache.js。我发现的所有示例似乎都在谈论将所有内容放入内联,但我希望我的模板在外部文件中,以便它们可以在多个地方使用。我怎么做? (我的堆栈中有jQuery,如果这有所不同。)

所以说我有:

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>

1 个答案:

答案 0 :(得分:1)

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

您的模板在DOM中的位置......

<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> 

您还可以直接在页面中呈现多个模板......

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