À l'aide de Jade Modèles (jade-lang.com) côté client

Je voudrais utiliser Jade modèles de client-côté. De préférence, généré à l'aide des Rails 3.1 asset pipeline. Je ne peux vraiment pas comprendre comment le faire.

Quelqu'un qui ai suis tombé sur le même problème et trouvé une solution? Toutes les pensées sont beaucoup apprécié.

InformationsquelleAutor sandstrom | 2011-07-04
  1. 7

    P. S: Probablement maintenant Substack réponse est mieux.

    browserify

    Peut-être que vous pouvez utiliser https://github.com/substack/node-browserify

    Côté navigateur require() pour votre noeud
    modules et packages npm

    Il suffit de pointer un fichier javascript ou deux à
    browserify et il va à pied à l'AST à
    lire tous vos require()s de manière récursive.
    Le faisceau résultant est tout
    vous avez besoin, y compris en tirant dans
    les bibliothèques vous pouvez l'avoir installé
    à l'aide de mnp!

    Navigateur

    http://jsperf.com/dom-vs-innerhtml-based-templating/53 => Le rendement n'est pas terrible selon cette référence => http://gist.github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/jade.js. Mais selon les TJ, il n'a jamais été censé être utilisé dans le navigateur, mais node.js au lieu de cela. Dans ce cas, il va être assez rapide. Il ya beaucoup de solutions de rechange que vous pouvez utiliser dans le navigateur au lieu.

    • Très bonne suggestion, dieu de travailler avec plaine de Jade, mais cela aurait travaillé à nice. En outre, il est un peu plus large de la solution, de travailler pour les autres node.js les modules de trop!
    • Peut-être le nœud-jadify est encore mieux 🙂 => github.com/substack/node-jadeify
    • comment l'avez-vous de travail avec la plaine de Jade? 🙂
    • Je n'ai pas essayé de le faire fonctionner dans le navigateur de moi-même.
    InformationsquelleAutor Alfred
  2. 31

    Si vous utilisez browserify vous pouvez utiliser à portée de main ce jade middleware: jadeify.
    Ensuite, vous pouvez simplement appeler jadeify("foo.jade", { x : 4, y : 5 }) côté navigateur après pointant vers un répertoire de vues au middleware et vous obtenez en retour un jquery poignée.

    InformationsquelleAutor substack
  3. 7

    Caisse Lame. C'est un Jade-comme le HTML moteur de template qui est conçu pour le client-côté (côté serveur) d'utilisation. Il y a quelques autres fonctionnalités que vous les gars pourrait, comme, en tant que bien.

    EDIT: Mais, seulement pour Node.js les serveurs. Il n'y a pas de Ruby mise en œuvre à cette époque.

    InformationsquelleAutor BMiner
  4. 5

    Cette fonctionnalité est désormais disponible en Jade.
    http://jade-lang.com/api/

    De leur API Documentations:

    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 devriez passer l'compilé fonction javascript pour le client, par exemple en écrivant la fonction (fn dans l'exemple) pour une .fichier js et ensuite l'inclure .fichier js dans le fichier html avec la balise script.

    Une autre option est d'utiliser templatizer, qui est une compilation de jade pour une .fichier js pour vous.

    • Ce n'est pas évident de savoir comment vous dresser un jade fichier sur le serveur, et ensuite appeler la fonction obtenue sur le navigateur. Pourriez-vous élaborer?
    • édité
    InformationsquelleAutor shak
  5. 3

    J'ai écrit un joyau appelé tilt-jade pour ce faire au sein de l'asset pipeline. Il est fait pour travailler exactement comme EJS fait avec les pignons, par défaut, il rend Jade modèles vers le bas dans les fonctions de sorte qu'ils peuvent être appelés côté client. Je ne suis pas sûr que c'est une excellente solution, mais il a travaillé bien pour mes besoins.

    InformationsquelleAutor therabidbanana
  6. 2

    Je viens de faire une bibliothèque pour la fabrication de jade disponible en html côté client. C'est aussi simple que < jade>...< /jade>. Check it out: https://github.com/charlieamer/jade-query

    InformationsquelleAutor charlieamer
  7. 2

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

    InformationsquelleAutor Mihai Rotaru
  8. 1

    Voici un hacky mais version simple, pour browserify à l'aide de 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'));
});

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

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

    De sorte que vous ne envoyer au client des modèles spécifiques dont vous avez besoin et browserify vous permet d'avoir une seule copie de l'exécution.

    InformationsquelleAutor Ian Warburton