javascript - Mustache.js 添加文本而不是 html

Question

这是我第一次使用 mustache.js，需要一些帮助。

做一个 html 模板生成器，我试图从 JSON 和 HTML 文件中获取数据，然后将它们显示到我的页面中。

因此，我使用此脚本从 JSON 获取默认主题，而不是获取 HTML:

$.getJSON('templates.json', function(json){
    $.each(json, function(theme, val){
        if(theme == 'Default'){
            template.load('templates/'+val.url+'/template.html', function(response, status, xhr){
                $(this).html(Mustache.render($(this).html(), {
                    tabs:val.tabs
                }));
            });
        }
    });
});

JSON:

{ 
    "Default" : {
        "url":"default",
        "logo": "YOUR LOGO HERE",
        "phone": "+1234567890",
        "tabs": [
            "About Us",
            "Delivery", 
            "Payment", 
            "Shipping", 
            "Contact Us"
        ]
    }
}

HTML:

    {{#tabs.length}}
    <div id="tabs">
        {{#tabs}}
        <input class="state" type="radio" title="tab1" name="tabs-state" id="tab1" checked />
        {{/tabs}}
        <div class="tabs flex-tabs">
            {{#tabs}}
            <label for="tab1" id="tab1-label" class="tab">{{.}}</label>
            {{/tabs}}
            {{#tabs}}
            <div id="tab1-panel" class="panel active">[[{{.}}]]</div>
            {{#tabs}}
        </div>
    </div>
    {{/tabs.length}}

我只是无法显示选项卡。我第一次尝试使用 javascript 将 json 转换为 html，但 Mustache 显示的是文本而不是 html。现在我正在尝试使用 html 中的条件，但没有成功。

我还需要为每个项目添加数字，例如:“tab1”、“tab2”.. - 这个 {{@index}} 适合吗？

如何仅为第一项添加checked？

也不确定 {{.}} 这是否显示我的选项卡的名称..

Answer 1

尽管稍微误解了如何编写 mustacheJS View ，但您几乎已经搞定了。它比您想象的还要简单!见下文。我简化了示例，以便您理解这个概念。

下面的一些解释:

{{#Default}}{/Default}} 表示循环对象字面量

{{#tabs}}{{/tabs}} 表示对 {{#Defaults}} 中存在的对象进行循环。

{{.}} 显示对象的全部内容。如果这是一个复杂的对象，它将被渲染为[object][object]。如果遇到这种情况，您必须在 View 中明确命名该对象。

<div class="tabs">
{{#Default}}
   {{#tabs}}
         <input class="state" type="radio" title="Tab1" name="tabs-state" checked/>
         <div class=tabs flex-tabs>
            {{.}}
         </div>
   {{/tabs}}
{{/Default}}
</div>

查看制作

<div class="tabs">
   <div class=tabs flex-tabs>
      About Us
   </div>
   <div class=tabs flex-tabs>
      Delivery
   </div>
   <div class=tabs flex-tabs>
      Payment
   </div>
   <div class=tabs flex-tabs>
      Shipping
   </div>
   <div class=tabs flex-tabs>
      Contact Us
   </div>
</div>