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 视图略有误解。它比你想象的还要简单！见下文。我已经简化了这个例子，所以你理解这个概念。

下面的一些解释：

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

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

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

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