Moustache templating - Exemple de base ne pas afficher et ne pas lancer d'erreurs

Je cherchais un exemple de base simple d'utilisation d'un modèle Moustache où le balisage et le modèle Moustache reste dans le document HTML (séparation des préoccupations).Moustache templating - Exemple de base ne pas afficher et ne pas lancer d'erreurs

Voici où je suis à:

<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="style.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script> 
</head> 
<body> 
    <div class="container"> 
    <h2>Here is a person</h2> 
    <template id="theTemplate"> 
     {{name}} 
    </template> 
    </div> 

    <script> 
    $(function() { 
     template = $('#theTemplate').html(); 
     data = { 
     name: 'billy' 
     }; 
     Mustache.render(template, data); 
    }); 
    </script> 
</body> 
</html>

Aucune erreur ne sont jetés, mais il ne fonctionne pas!

Source

2017-02-14 Jethro Hazelhurst

s'il vous plaît ré-écrire le titre pour expliquer la ** exacte ** problème de ce fil – vsync

Mustache.render renvoie une chaîne qui est l'amalgamation du modèle et des données de l'objet fourni. Il ne fait rien d'autre avec cette chaîne, donc si vous voulez mettre à jour le DOM, vous devrez toujours le faire manuellement. Comme vous utilisez jQuery, vous pouvez utiliser append() pour le faire:

$('h2').append(Mustache.render(template, data));

Cependant, il serait plus logique d'inclure toute la valeur de texte h2 dans le modèle à au moins rendre son utilisation utile:

$(function() { 
 
    template = $('#theTemplate').html(); 
 
    data = { name: 'billy' }; 
 
    $('h2').text(Mustache.render(template, data)); 
 
});

<link rel="stylesheet" href="style.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script> 
 
<div class="container"> 
 
    <h2></h2> 
 
    <template id="theTemplate"> 
 
    Here is a person named {{name}} 
 
    </template> 
 
</div>

Source

2017-02-14 10:43:43

Oh wow, je mérite d'être downvoted pour cela. Merci Rory! –

Moustache templating - Exemple de base ne pas afficher et ne pas lancer d'erreurs

Répondre

Questions connexes