Mustache.js is adding text instead of html

Question

It's my first time when I use mustache.js and need some help, please.

Doing a html template builder and I am trying to grab data from JSON and HTML files, than show them into my page.

So I am using this script to get Default theme from JSON than to get the 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}}

I just can't display the tabs. First time I tried with javascript to convert json into html, but Mustache was showing text instead of html. Now I am trying with conditions in html with no luck.

I also need to add numbers to each item, eg: "tab1", "tab2".. - is this {{@index}} good for that?

How can I add checked only for first items?

Also not sure if {{.}} this is displaying the name of my tab..

score 1 · Answer 1 · answered Feb 16 '17 at 11:14

You've almost got this nailed, although have slightly misunderstood how to write the mustacheJS view. It's even simpler than you thought! See below. I've simplified the example, so you understand the concept.

Some explanation for below:

{{#Default}}{/Default}} represents looping over an object literal

{{#tabs}}{{/tabs}} presents looping over the object that exists within {{#Defaults}}.

{{.}} displays the entire contents of the object. If this was a complex object, it would be rendered as [object][object]. If you ever encounter this, you must name the object explicitly in your 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>

View Produced

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

any idee of how can I add 1,2,3,4 (index) to each div? without adding them manually into json — Adrian, Feb 16 '17 at 11:38
I usually add an index to my object. See [here](http://stackoverflow.com/questions/8567413/index-of-an-array-element-in-mustache-js). I believe handlebars allows you to access index from view, but I've never done this. — IronAces, Feb 16 '17 at 11:42

Mustache.js is adding text instead of html

1 Answers1