Moustache.js ajoute du texte au lieu de html

Question

C'est la première fois que j'utilise mustache.js et j'ai besoin d'aide, s'il vous plaît. Faire un générateur de modèles html et j'essaye d'attraper des données à partir de fichiers JSON et HTML, que les montrer dans ma page

Je me sers de ce script pour obtenir le thème par défaut de JSON que pour obtenir le code 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}} 

Je ne peux N'affiche pas les onglets. La première fois que j'ai essayé avec javascript pour convertir json en html, mais Moustache affichait du texte au lieu de html. Maintenant, j'essaie avec des conditions en html sans chance.

J'ai également besoin d'ajouter des numéros à chaque élément, par exemple: "tab1", "tab2" .. - est-ce {{@index}} bon pour cela?

Comment puis-je ajouter checked seulement pour les premiers articles?

Aussi ne sais pas si ce {{.}} affiche le nom de mon onglet ..

Answer 1

Vous avez presque obtenu ce clouée, mais ont légèrement mal compris comment écrire la vue mustacheJS. C'est encore plus simple que tu ne le pensais! Voir ci-dessous. J'ai simplifié l'exemple, donc vous comprenez le concept.

Quelques explications pour ci-dessous:

{{#Default}}{/Default}} représente en boucle sur un objet littéral

{{#tabs}}{{/tabs}} présente en boucle sur l'objet qui existe au sein {{#Defaults}}.

{{.}} affiche le contenu entier de l'objet. S'il s'agissait d'un objet complexe, il serait rendu [object][object]. Si jamais vous rencontrez cela, vous devez nommer l'objet explicitement dans votre vue.

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

Voir Produit

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