À l'aide de pré-compilé les modèles avec Handlebars.js (jQuery Mobile)

Question

Je me bats un peu avec de pré-compilation de modèles dans le Guidon. Mon jQuery Mobile projet obtient assez grand modèle-sage, et je tiens à le pré-compiler les modèles que j'utilise.

Cependant, je n'arrive pas à trouver une bonne explication (comme une étape par étape tutoriel) comment faire cela avec le Guidon.

J'ai toujours mes modèles en ligne en utilisant les balises de script. J'ai guidon installé à l'aide de MNP. Mais maintenant, je suis un peu perdu dans la façon de procéder.

Je devine que de faire quelque chose comme

handlebars -s event.handlebars > event.compiled

et en quelque sorte, y compris de l'événement.compilé contenu? Mais alors, comment l'appeler.

Je vais appeler mes modèles comme

var source = $('#tmpl_profile').html(),
template = Handlebars.compile(source),
context = user.profile()),
html    = template(context);

J'espère que quelqu'un peut jeter un peu de lumière sur ce pour moi.

Answer 1

Donc, après beaucoup d'essais et d'erreur (ce qui est le meilleur moyen de l'apprendre) voici la façon qui fonctionne pour moi.

D'abord - l'externalisation de tous vos modèles, disons que vous avez un modèle à l'intérieur des balises de script comme

<script id="tmpl_ownevents" type="text/templates">
    {{#unless event}}
        <div class="notfoundevents"><p>No events for you</p></div>    
    {{/unless}}
</script>

Créer un nouveau fichier appelé les événements.tmpl et copier/coller le modèle. Assurez-vous de supprimer le script éléments eux-mêmes, ce gotcha peu de moi dans l'un..

Installer le Guidon de commande en ligne de script comme

npm install -g handlebars

allez dans le dossier que vous avez enregistré les événements.tmpl dans et exécuter

handlebars events.tmpl -f events.tmpl.js

Inclure le javascript compilé dans votre code HTML après que vous avez inclus Handlebars.js

<script src="events.tmpl.js"></script>

Maintenant tout ce qui reste est de changer votre modèle normal de code en quelque chose ressemblant à ce qui suit

var template = Handlebars.templates['events.tmpl'], // your template minus the .js
    context = events.all(), // your data
    html    = template(context);

Et là vous l'avez, super rapide pré-compilé Guidon modèles.

Answer 2

Une autre grande option pour cela est d'utiliser GruntJS. Une fois installé:

ngp installer grunt-contrib-guidon --save-dev

Ensuite, à l'intérieur de votre gruntfile.js

grunt.initConfig({
    dirs: {
      handlebars: 'app/handlebars'
    },
    watch: {
      handlebars: {
        files: ['<%= handlebars.compile.src %>'],
        tasks: ['handlebars:compile']
      }
    },
    handlebars: {
      compile: {
        src: '<%= dirs.handlebars %>/*.handlebars',
        dest: '<%= dirs.handlebars %>/handlebars-templates.js'
      }
    }
});


grunt.loadNpmTasks('grunt-contrib-handlebars');

Ensuite il vous suffit de tapez grunt watch de votre console, et grunt sera automatiquement compiler tous les *.guidon fichiers dans votre handlebars-templates.js fichier.

Vraiment rad façon de travailler avec un guidon.

Answer 3

Voici la façon dont je le fais:

Préparation

Nous allons simplement supposer que tous vos variables de modèle sont dans une variable nommée context:

var context = {
    name: "Test Person",
    ...
};

Où mettre vos modèles

Créer un répertoire contenant tous vos modèles (que nous appellerons templates/) Ajoutez vos modèles ici, appelés filename.handlebars.

Votre structure de répertoire:

.
└── templates
    ├── another_template.handlebars
    └── my_template.handelbars

La compilation de vos modèles

D'abord aller à la racine de votre répertoire, puis compilez vos modèles avec le mécanisme national de prévention programme en ligne de commande:

handlebars templates/*.handlebars -f compiled.js

Nouvelle structure de répertoire:

.
├── compiled.js
└── templates
    ├── another_template.handlebars
    └── my_template.handlebars

L'utilisation de la

Inclure l' compiled.js dans votre page HTML après vous d'inclure le runtime:

<script src="handlebars.runtime.js"></script>
<script src="compiled.js"></script>

Rendre vos modèles à l'aide de la global Handlebars objet:

// If you used JavaScript object property conform file names
// Original filename: "my_template.handlebars"
Handlebars.templates.my_template(context)

// if you used special characters which are not allowed in JavaScript properties
// Original filename: "my-template.handlebars"
Handlebars.templates["my-template"](context)

Remarques

Remarque l'extension de fichier .handlebars. Il est automatiquement enlevé lors de la compilation de modèles.

Extra: si vous utilisez l'un des Jetbrains IDEs avec le Guidon/Moustache plugin vous obtenez même un bon support de l'éditeur.

Answer 4

La précompilation Guidon Modèles avec Grunt

En supposant que vous avez Node.js installé. Si vous n'en avez pas, allez le faire.

1) Configuration du Nœud de dépendances:

Dans votre répertoire racine des applications ajouter un fichier nommé package.json. Collez le texte suivant dans le fichier:

{
  "devDependencies": {
   "grunt-contrib-handlebars": "~0.6.0",
    "grunt-contrib-watch": "~0.5.3",
    "handlebars": "~1.3.0"
  },
}

Ce fichier JSON dit Nœud de quels paquets il y a besoin d'installer. Cela permet d'avoir d'autres développeurs se lever et courir très vite, comme vous le verrez dans la prochaine étape.

2) L'Installation De Dépendances Node:

Dans votre terminal/invite de commande/powershell, cd dans vos projets répertoire root et exécutez les commandes suivantes:

npm install grunt -g
npm install grunt-cli -g

Et pour installer la liste des dépendances dans votre forfait.json:

npm install

Maintenant que vous avez installé toutes les dépendances node que vous avez besoin. Dans vos projets répertoire racine, vous verrez node_modules folder.

3) Configuration De Grunt:

Dans vos projets racine du répertoire, créez un fichier nommé Gruntfile.js. Collez le texte suivant dans le fichier:

module.exports = function(grunt) {

    var TEMPLATES_LOCATION        = "./src/templates/",       // don't forget the trailing /
        TEMPLATES_EXTENSION       = ".hbs",
        TEMPLATES_OUTPUT_LOCATION = TEMPLATES_LOCATION,       // don't forget the trailing /
        TEMPLATES_OUTPUT_FILENAME = "compiled_templates.js";  // don't forget the .js

    grunt.initConfig({
        watch: {
            handlebars: {
                files: [TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION],
                tasks: ['handlebars:compile']
            }
        },
        handlebars: {
            compile: {
                src: TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION,
                dest: TEMPLATES_OUTPUT_LOCATION + TEMPLATES_OUTPUT_FILENAME,
                options: {
                    amd: true,
                    namespace: "templates"
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-handlebars');
    grunt.loadNpmTasks('grunt-contrib-watch');

}

4) Configurer à Votre Convenance:

Si vous ne l'utilisez pas Require.js, vous aurez envie de changement handlebars.compile.options.amd de false. Vous pouvez également ajuster l' namespace option à votre goût. Si vous utilisez besoin/amd modules, l'espace de noms de propriété n'a pas d'importance (il est par défaut en "JST", si vous l'enlever).

Parce que toutes les structures du projet sont un peu différentes, vous aurez besoin de configurer le Gruntfile juste un peu. Modifier les constantes TEMPLATES_LOCATION, TEMPLATES_EXTENSION, TEMPLATES_OUTPUT_LOCATION, TEMPLATES_OUTPUT_FILENAME pour les adapter à votre projet.

Si vos modèles sont dispersés tout au long de votre application, vous aurez envie de changement TEMPLATES_LOCATION pour les plus bas répertoire possible. Assurez-vous que vos modèles sont isolés à partir de votre node_modules, bower_components ou toute autre 3e partie répertoires, parce que vous ne voulez pas Grunt pour compiler 3ème Partie des modèles dans vos applications compilées modèles. Si l'on inclut tous de votre propre code dans un ./src, ./js, ./app annuaire, vous serez d'accord.

5) la Compilation de modèles avec Grunt:

Pour exécuter grognement à l'arrière-plan, ouvrez votre terminal et d' cd dans vos projets répertoire root et lancez la commande: grunt watch:handlebars (juste grunt watch également). Avec grunt cours d'exécution en arrière-plan, toutes les modifications apportées à votre modèle fichiers seront automatiquement compilé et le fichier de sortie spécifié handlebars.compile.dest sera réécrit en tant que de besoin. La sortie devrait ressembler à quelque chose comme ceci:

Running "watch" task
Waiting...

Pour exécuter la tâche de compiler seul, ouvrez votre terminal et d' cd dans vos projets répertoire root et lancez la commande: grunt handlebars:compile (juste grunt:handlebars également). La sortie devrait ressembler à quelque chose comme:

Running "handlebars:compile" <handlebars> task
File "./src/templates/compiled_templates.js" created.

Done, without errors.

Answer 5

Pour le Guidon 2.0.0 mise à Jour de l'alpha:

@Macro a expliqué très clairement comment cela fonctionne avec 1 morceau de modèle, veuillez consulter cette réponse pour savoir comment faire handlebars.js fonctionne

Si vous voyez "TypeError: 'undefined' est pas une fonction" lors de l'utilisation de précompilés modèles:

Cette erreur s'est produite "handlebar.runtime.js" la ligne 436 quand evaluting templateSpec.appel(conteneur, le Guidon, le contexte, les options.les aides, les options.partiels, les options.de données),

parce que le compilateur mnp installé ne correspond pas à celui utilisé par le navigateur. La dernière version stable téléchargé est v1.3.0 alors que si vous utilisez npm install guidon, il faudra installer la version 2.0.0-alpha4 pour vous.

S'il vous plaît vérifier à l'aide de

handlebars any_your_template_before_compile.handlebars | grep "compiler"

ce qui vous donnera le souhaitez, si vous avez en effet installé guidon 2.0.0-alpha4:

this.compiler = [5, '>=2.0.0']

Avec le premier nombre représente le numéro de version de votre guidon compilateur. Tapez le code suivant dans le navigateur de la console, voir si le résultat correspond à la version.

Handlebars.COMPILER_REVISION

Si vous avez compilateur 5 avec le navigateur revison 4, alors vous aurez le problème ci-dessus.

Pour le réparer, installer guidon 1.3.0 avec la commande suivante

npm install handlebars@1.3.0 -g

Ensuite, essayez de compiler à nouveau, vous verrez ce temps, il vous donne la version correspondante de l'info et vous êtes bon pour aller avec le précompilés modèles.

this.compilerInfo = [4, '>=1.0.0']

Expliquez si vous avez des tonnes de modèles:

Tout d'abord l'externalisation de chaque pièce de votre embrassa modèles: l'événement.guidon, point.guidon, etc... Vous pouvez les mettre tous dans un répertoire, par exemple "/templates"

Compiler tous les fichiers et de les enchaîner dans 1 fichier avec la commande suivante:

handlebars *.handlebars -f templates.js

Et comprennent guidon.de l'exécution, ce fichier dans votre code HTML

<script src="/lib/handlebars.runtime.js"></script>
<script src="templates.js"></script>

Les modèles seront injectés dans le Guidon.les modèles par leur nom. Par exemple, un événement.le guidon peut être consulté par le Guidon.tempaltes [événement].