Utilisation de Modèles de Jade (jade-lang.com) côté client

Si vous utilisez browserify vous pouvez utiliser ce middleware Jade pratique: jadeify. Ensuite, vous pouvez simplement appeler jadeify("foo.jade", { x : 4, y : 5 }) côté navigateur après avoir pointé un répertoire views sur le middleware et vous récupérez un handle jquery.

Caisse Lame. C'est un moteur de modèle HTML de type Jade conçu pour une utilisation côté client (et Côté Serveur). Il y a d'autres fonctionnalités que vous pourriez aimer, aussi bien.

EDIT:, Mais seulement pour le Nœud.serveurs js. Il n'y a pas d'implémentation Ruby pour le moment.

Cette fonctionnalité est maintenant disponible dans Jade. http://jade-lang.com/api/

À partir de leurs Documentations API:

var jade = require('jade');

// Compile jade file to a function
var fn = jade.compileClient('string of jade', options);

// Later in client site, render the function to HTML
var html = fn(locals);

Vous devez passer la fonction JavaScript compilée au client, par exemple en écrivant la fonction (fn dans l'exemple) à A.fichier js, puis inclure le .fichier js dans le fichier html avec la balise script.

Une autre option utilise templatizer, qui compile jade en a.fichier js pour vous.

J'ai écrit une gemme appelée tilt-jade pour le faire dans le pipeline d'actifs. Il est fait pour fonctionner exactement comme le fait EJS avec les pignons par défaut-il rend les modèles Jade en fonctions afin qu'ils puissent être appelés côté client. Je ne suis pas sûr que ce soit une excellente solution, mais cela a bien fonctionné pour mes besoins.

Je viens de créer une bibliothèque pour rendre jade disponible en html côté client. C'est aussi simple que .... Découvrez-le: https://github.com/charlieamer/jade-query

Jade prend désormais en charge la compilation pour le client par défaut; utilisez l'option -c --client. Voir http://jade-lang.com/command-line.

Voici une version hacky mais simple pour browserify en utilisant gulp-jade.

var jade = require('gulp-jade'),
    replace = require('gulp-replace');

gulp.task('jade-client', function() {
    gulp.src('./views/**/*.jade')
        .pipe(jade({
            client: true
        }))
        .pipe(replace(/function template/g, 'var jade = require("gulp-jade/node_modules/jade/lib/runtime");\n\nmodule.exports = function'))
        .pipe(gulp.dest('./client/templates'));
});

Puis dans mon fichier JS côté client...

var template = require('./path_to_compiled_template_file');
var renderedTemplateHtml = template({ aLocal: 'blah blah'});

Vous n'envoyez donc au client que les modèles spécifiques dont vous avez besoin et browserify s'assure que vous n'avez qu'une seule copie du runtime.