CODEWITHSUNDEEP
javascriptjqueryjsonmustache
Adrian
Adrian

Reputation: 523

Mustache.js is adding text instead of html

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

Upvotes: 0

Views: 695

Answers (1)

IronAces
IronAces

Reputation: 1893

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>

Upvotes: 1

Related Questions