Node.js avec Handlebars.js sur le serveur et le client

Ouais, c'est un problème épineux --- un peu comme la citant des problèmes dans des scripts shell qui deviennent un des rats nid de cité entre guillemets.

Ma solution est d'utiliser de jade (la haml) dans expressjs (côté serveur) à la sortie de guidon en fonction des modèles pour le client. De cette façon, le serveur utilise une syntaxe (jade), et le client utilise un autre (guidon). Je suis dans le même carrefour que vous, j'ai le même défi.

Bien sûr, jade n'est pas indispensable (même si il est prêt pour expressjs). Vous pouvez choisir n'importe quel (non-guidon) moteur de template pour le serveur, et/ou vous pouvez utiliser le guidon sur le serveur avec votre non-guidon de template sur le client --- aussi longtemps que les deux syntaxes de votre choix de template moteurs ne sont pas en collision. Depuis que je suis en utilisant emberjs sur le client et il utilise le guidon de la syntaxe (par défaut), je préfère utiliser emberjs + guidon de syntaxe sur le client. Donc expressjs + jade est devenu un choix naturel pour le serveur.

Un moyen facile de le faire est de simplement ajouter un \ avant la {{ dans un Guidon de fichier. Par exemple:

<script type="text/x-template" id="todo-item-template">
<div class="todo-view">
    <input type="checkbox" class="todo-checkbox" \{{checked}}>
    <span class="todo-content" tabindex="0">\{{text}}</span>
</div>

<div class="todo-edit">
    <input type="text" class="todo-input" value="\{{text}}">
</div>

<a href="#" class="todo-remove" title="Remove this task">
    <span class="todo-remove-icon"></span>
</a>

Le code ci-dessus sera rendu sur le client avec le {{..}} préservation des balises.

J'ai travaillé autour de cette en passant à côté client par le biais de modèles de serveur-côté des modèles.

Donc sur le côté serveur pour lire tous vos côté client des modèles à un tableau et de le passer à votre fonction rendu sur le côté serveur

Dans votre gestionnaire d'itinéraire faire quelque chose comme:

readTemplates(function(err, clientTemplates) {
  res.render("page", {
    clientTemplates: clientTemplates;   
  });
});

Puis dans la mise en page.hbs:

{{#each clientTemplates}}
<script type="text/handlebars id="{{this.filename}}" >
{{{this.template}}}
</script>
{{/each}}

Ici, je suis en utilisant les noms de fichiers sans extensions que l'id du modèle de sorte qu'ils peuvent être référencées à partir de la Dorsale points de vue. Oh, et n'oubliez pas de mettre en œuvre la mise en cache pour le mode de production.

Ouais, ça craint.

Je pense que nous devrions écrire un Guidon/Express/se Connecter aide pour cela.

Je n'aimais pas la précompilation solution (parce que je veux définir des modèles dans le même fichier dans lequel je vais les utiliser), ni de la naïveté \{{ échapper à la solution (car il a besoin du plein Cintre et d'un compilateur code javascript) alors je suis venu avec une solution hybride qui utilise le Guidon " aidants:

1) Inscrire une nouvelle aide appelée "modèle" sur le serveur de configuration

var hbs = require('hbs');
hbs.registerHelper("template", function(key, options){
    var source = options.fn().replace("\\{{", "{{");
    var ret =
    '<script>\n' + 
        key + ' = function(opt){\n' +
            'return Handlebars.template(' + hbs.handlebars.precompile(source) + ')(opt);\n' +
        '}\n' + 
    '</script>';
    return ret;
});

2) Utiliser n'importe où dans votre côté client sur une page web (avec \{{ échapper à côté client paramètres)

{{#template "myTemplate"}}
    <div>
        <p>Hello \{{this.name}}!</p>
    </div>
{{/template}}

(le serveur de précompiler dans quelque chose de ce genre)

<script>
    myTemplate = function(opt){
        return Handlebars.template(/* HBS PRECOMPILATED FUNCTION */)(opt);
    }
</script>

3) il suffit d'appeler la fonction où vous en avez besoin en javascript côté client

var generatedHtml = myTemplate("world");   //= <div><p>Hello world!</p></div>
$("#myDiv").html(generatedHtml);           //or whatever