web-dev-qa-db-fra.com

Utilisation de modèles précompilés avec Handlebars.js (environnement jQuery Mobile)

Je me bats quelque peu avec la pré-compilation de modèles dans les guidons. Mon projet jQuery Mobile devient assez gros en termes de modèles et je souhaite précompiler les modèles que j'utilise.

Cependant, je n'arrive pas à trouver une bonne explication (comme un tutoriel étape par étape) sur la façon de le faire avec les guidons.

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

Je suppose que je fais quelque chose comme

handlebars -s event.handlebars > event.compiled

et en quelque sorte y compris le contenu event.compiled? Mais alors, comment l'appeler.

J'appelle mes modèles comme ça

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

J'espère que quelqu'un pourra faire la lumière à ce sujet pour moi.

javascriptjquery-mobilehandlebars.js
67
Marco

Donc, après beaucoup d'essais et d'erreurs (qui est la meilleure façon de l'apprendre), voici la façon dont cela fonctionne pour moi.

Tout d'abord, externalisez tous vos modèles, disons que vous avez un modèle dans 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éez un nouveau fichier appelé events.tmpl et copiez/collez le modèle dans celui-ci. Assurez-vous de supprimer les éléments de script eux-mêmes, cela m'a mordu dans le a ..

Installez le script de ligne de commande du guidon comme ceci

npm install -g handlebars

allez dans le dossier dans lequel vous avez enregistré events.tmpl et exécutez

handlebars events.tmpl -f events.tmpl.js

Incluez le javascript compilé dans votre code HTML après avoir inclus Handlebars.js

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

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

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

Et voilà, des modèles de guidons précompilés ultra rapides.

115
Marco

Une autre excellente option consiste à utiliser GruntJS . Une fois installé:

npm install grunt-contrib-guidbars --save-dev

Puis dans 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, vous tapez simplement grunt watch depuis votre console, et grunt compilera automatiquement tous les fichiers * .handlebars dans votre fichier handlebars-templates.js.

Une façon vraiment radicale de travailler avec le guidon.

15
Scott Silvi

Voici comment je le fais:

Préparation

Nous supposerons simplement que toutes vos variables de modèle sont dans une variable appelée context:

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

Où mettre vos modèles

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

Votre structure de répertoire:

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

Compiler vos modèles

Accédez d'abord à votre répertoire racine, puis compilez vos modèles avec le programme CLI npm:

handlebars templates/*.handlebars -f compiled.js

Nouvelle structure de répertoires:

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

Usage

Inclure le compiled.js dans votre page HTML après avoir inclus le runtime:

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

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

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

Notez l'extension de fichier .handlebars. Il est automatiquement supprimé lors de la compilation des modèles.

Extra: si vous utilisez l'un des IDE Jetbrains avec le plugin Handlebars/Moustache vous obtenez même un bon support d'édition.

10
apfelbox

Modèles de guidon de précompilation avec Grunt

En supposant que Node.js soit installé. Sinon, allez faire ça.

1) Configuration des dépendances Node:

Dans le répertoire racine de vos applications, ajoutez un fichier nommé package.json. Collez ce qui suit dans ce fichier:

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

Ce fichier JSON indique Node quels packages il doit installer. Cela aide les autres développeurs à être opérationnels très rapidement, comme vous le verrez à l'étape suivante.

2) Installation de Node Dépendances:

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

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

Et pour installer les dépendances répertoriées dans votre package.json:

npm install

Vous avez maintenant installé toutes les dépendances de nœud dont vous avez besoin. Dans le répertoire racine de vos projets, vous verrez un node_modules folder.

3) Configuration de Grunt:

Dans le répertoire racine de vos projets, créez un fichier nommé Gruntfile.js. Collez ce qui suit dans ce 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) Configuration à votre goût:

Si vous n'utilisez pas Require.js, vous voudrez changer handlebars.compile.options.AMD à false. Vous pouvez également modifier l'option namespace à votre convenance. Si vous utilisez des modules require/AMD, la propriété namespace n'a pas d'importance (sa valeur par défaut est "JST", si vous la supprimez).

Parce que toutes les structures de projet sont un peu différentes, vous devrez configurer un peu le Gruntfile. Modifiez les constantes TEMPLATES_LOCATION, TEMPLATES_EXTENSION, TEMPLATES_OUTPUT_LOCATION, TEMPLATES_OUTPUT_FILENAME pour s'adapter à votre projet.

Si vos modèles sont dispersés dans votre application, vous souhaiterez modifier TEMPLATES_LOCATION dans le répertoire le plus bas possible. Assurez-vous que vos modèles sont isolés de vos node_modules, bower_components ou de tout autre répertoire tiers, car vous ne voulez pas que Grunt compile des modèles tiers dans vos modèles compilés d'applications. Si vous incluez tout votre propre code dans un ./src, ./js, ./app répertoire, ça va aller.

5) Compilation de modèles avec Grunt:

Pour exécuter grunt en arrière-plan, ouvrez votre terminal et cd dans le répertoire racine de vos projets et exécutez la commande: grunt watch:handlebars (juste grunt watch fonctionne également). Avec grunt s'exécutant en arrière-plan, toutes les modifications apportées à vos fichiers de modèle seront automatiquement compilées et le fichier de sortie spécifié handlebars.compile.dest sera réécrit au besoin. La sortie ressemblera à ceci:

Running "watch" task
Waiting...

Pour exécuter la tâche de compilation seule, ouvrez votre terminal et cd dans le répertoire racine de vos projets et exécutez la commande: grunt handlebars:compile (juste grunt:handlebars fonctionne également). La sortie ressemblera à quelque chose comme:

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

Done, without errors.
6
Cory Danielson

Pour la mise à jour alpha du guidon 2.0.0:

@Macro a expliqué assez clairement comment cela fonctionne avec 1 morceau de modèle, veuillez voir cette réponse pour savoir comment faire du guidon.js

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

Cette erreur s'est produite à la ligne "handlebar.runtime.js" 436 lors de l'évaluation de templateSpec.call (conteneur, guidons, contexte, options.helpers, options.partials, options.data),

car le compilateur npm installé ne correspond pas à celui utilisé par le navigateur. La dernière version stable téléchargée est la v1.3.0 tandis que si vous utilisez le guidon d'installation npm, elle installera 2.0.0-alpha4 pour vous.

Veuillez le vérifier en utilisant

handlebars any_your_template_before_compile.handlebars | grep "compiler"

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

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

Le premier chiffre représente la version de votre compilateur de guidon. Tapez le code suivant dans la console du navigateur, voyez si le résultat correspond à la version.

Handlebars.COMPILER_REVISION

Si vous avez le compilateur 5 avec la version 4 du navigateur, vous aurez le problème ci-dessus.

Pour le corriger, installez le guidon 1.3.0 avec la commande suivante 

npm install [email protected] -g

Ensuite, essayez de le compiler à nouveau, vous verrez cette fois, il vous donnera les informations de version correspondantes et vous êtes prêt à utiliser les modèles précompilés.

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


Expliquez simplement si vous avez des tonnes de modèles:

Externalisez d'abord chaque pièce de vos modèles de contreventement: event.handlebars, item.handlebars, etc ... Vous pouvez les mettre tous dans un dossier, dites "/ templates"

Compilez tous les fichiers et concaténez-les en 1 fichier avec la commande suivante:

handlebars *.handlebars -f templates.js

Et incluez handlebars.runtime, 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 Handlebars.templates par leur nom. Par exemple, event.handlebars est accessible par Handlebars.tempaltes ['event'].

3
yeelan