Comment charger des modèles avec Hogan.JS à partir d'un fichier externe?

- Je utiliser Hogan.JS que JavaScript template library. Il est censé charge JavaScript modèles à partir de fichiers externes. On peut sans doute externaliser plusieurs modèles dans un fichier JavaScript externe.

Personne ne sait comment faire cela?

J'ai l'exemple de code suivant:

<!DOCTYPE html>
<html>
  <head>
    <title>Hogan.JS Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="js/jquery-1.9.0.min.js"></script>
    <script src="js/hogan-2.0.0.min.js"></script>
    <script id="scriptTemplate" type="text/mustache">
      <p>Your text here: {{text}}</p>
    </script>
  </head>
  <body>
    <script>
      var data = {
        text: 'Hello World'
      };

      var template = $('#scriptTemplate').html();
      var compiledTemplate = Hogan.compile(template);
      var renderedTemplate = compiledTemplate.render(data);

      var box = document.createElement('div');
      box.innerHTML = renderedTemplate;
      document.body.insertBefore(box,document.body.childNodes[0]);
    </script>
  </body>
</html>

Avec les Id je peux l'adresse de modèles mais j'ai toujours besoin d'un script en ligne. 🙁

Comment est-ce de travailler avec des fichiers externes?

OriginalL'auteur Benny Neugebauer | 2013-01-30

28

Vous avez deux options pour charge externe des modèles:
1. Pré-compiler les templates (la meilleure caractéristique de Hogan.js à mon humble avis) ou
2. À l'aide de require.js's texte plugin pour charger le modèle de la chaîne de
Malheureusement, la documentation de pré-compilation Hogan.js modèles est inexistante. Si vous avez une copie de la Dépôt Github à l'intérieur de l' bin annuaire est un script qui s'appelle hulk qui fera le travail. Il nécessite nodejs avec quelques npm modules (c'est à dire nopt et mkdirp) installé.

Une fois que vous avez nodejs et ces modules installés, étant donné un modèle de fichier de Test.hogan:
```
<p>Your text here: {{text}}</p>
```
Vous pouvez pré-compiler le script à l'aide de la commande suivante:
```
hulk Test.hogan
```
Résultant dans le texte suivant:
```
if (!!!templates) var templates = {};
templates["Test"] = new Hogan.Template({code: function (c,p,i) { var t=this;t.b(i=i||"");t.b("<p>Your text here: ");t.b(t.v(t.f("text",c,p,0)));t.b("</p>");return t.fl(); },partials: {}, subs: {  }});
```
Enregistrer ce pour un fichier appelé templates.js

Maintenant dans votre page HTML, vous devez charger que templates.js fichier et il crée un objet global appelé templates où le modèle compilé fonction de la touche "Test". Vous pouvez également laisser la hogan.js fichier puisque c'est le compilateur (et vos modèles sont maintenant en pré-compilé) et il suffit d'inclure les template.js fichier qui vient dans la distribution.
```
<!DOCTYPE html>
<html>
  <head>
    <title>Hogan.JS Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="js/template.js"></script>
    <script src="js/templates.js"></script>
  </head>
  <body>
    <script>
      var data = {
        text: 'Hello World'
      };

      var compiledTemplate = templates['Test'];
      var renderedTemplate = compiledTemplate.render(data);

      var box = document.createElement('div');
      box.innerHTML = renderedTemplate;
      document.body.insertBefore(box,document.body.childNodes[0]);
    </script>
  </body>
</html>
```
Remarque: j'ai eu quelques problèmes à l'aide de l'actuel master branche du dépôt Github depuis, il a généré un modèle qui utilise un constructeur différent de celui utilisé dans la version 2.0.0 version du modèle. Si vous utilisez hulk assurez-vous d'utiliser le template.js fichier situé dans le lib dossier.

Alternativement, vous pouvez utiliser require.js et le texte de plugin. Les télécharger et les enregistrer sur votre js dossier. Ensuite, vous aurez besoin d'ajouter un require instruction pour charger le modèle de texte:
```
<!DOCTYPE html>
<html>
  <head>
    <script src="js/hogan-2.0.0.js"></script>
    <script src="js/require.js"></script>
  </head>
  <body>
    <script>
      var data = {
        text: 'Hello World'
      };

      require(['js/text!Test.hogan'], function(testHoganText) {
        //testHoganText contains the text of your template
        var compiled = Hogan.compile(testHoganText);
        var renderedTemplate = compiled.render(data);

        var box = document.createElement('div');
        box.innerHTML = renderedTemplate;
        document.body.insertBefore(box,document.body.childNodes[0]);
      });
    </script>
  </body>
</html>
```
Génial! Je vous remercie beaucoup. Qui devrait être dans l'officiel Hogan.js la documentation!
Juste une note de côté. Ce qui ne l' '!!!' dans le modèle compilé? Je n'arrive pas à trouver une explication de n'importe où.
dire que logique de ne pas. Avec un triple pas, falsy valeurs (0, false, "", null, indéfini et NaN) devient true et truthy valeurs (true, l'Objet, la Fonction, le Tableau, le Nombre de non-zéro, d'une Chaîne non vide) se transforme en false. Ils sont juste vérifier si la variable templates existe... Vous ne pouvez pas ajouter une propriété à un objet défini

OriginalL'auteur Phuong LeCong
5

Il existe une autre méthode qui fonctionne très bien si vous n'êtes pas à l'aide d'un noeud, ni si vous voulez compter require.js

Vous pouvez simplement utiliser le jQuery $.get pour obtenir le chemin d'accès au fichier de modèle. Donc, un exemple ressemble à ceci:
```
$.get('templates/book.hogan', function(templates){
            var extTemplate = $(templates).filter('#book-tpl').html();
            var template = Hogan.compile(extTemplate);
            var rendered = template.render(datum);
            $('.marketing').append(rendered);
});
```
Le modèle peut être simplement un .fichier html (je viens de l'utiliser .hogan) et tout le code html dans le template doit être enveloppé dans une balise script avec un id unique de sorte que vous pouvez obtenir l'id ici. Datum vient de('typeahead:selected') mais c'est hors de propos j'ai juste pensé que je devrais expliquer puisque c'est dans le code avec aucune autre référence.

cette réponse est meilleure que l'a accepté.

OriginalL'auteur Alex

J'ai eu la même question et il a terminé avec une façon différente de faire les choses que Phuong, je pensais que je voudrais partager.

Côté serveur, j'ai compiler le modèle et l'enregistrer dans un fichier avec le script suivant :

//template will be a string
var template = hogan.compile(
    '<span>{{text}}</span>',
    { asString: true }
);

//prepare the content of the file we are about to create
var content =
    'if(!templates) var templates = {};' +
    'templates.example = ' + template + ';';

//write to a file that will be called by the client
fs.writeFile('compiledTemplate.js', content, function(err){
    if(err){ console.log('Oops !') }
});

Et côté client, je n' :

<!DOCTYPE html>
<html>
  <head>
    <script src="js/hogan-2.0.0.js"></script>
    <script src="js/compiledTemplate.js"></script>
  </head>
  <body>
    <script>

      var data = {
        text: 'Hello World'
      };

      var template = new Hogan.Template(templates.example),
          html = template.render(data);

      var box = document.createElement('div');
      box.innerHTML = html;
      document.body.insertBefore(box,document.body.childNodes[0]);

    </script>
  </body>
</html>

J'espère que cela aide !

OriginalL'auteur Louis Ameline

Vous devez vous connecter pour publier un commentaire.