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>

Mustache.js正在添加文本而不是html

1 个答案: