🥇 Modelos de jade pré-compilar com NodeJS / Express para uso no lado do cliente

Um módulo Node simples exportando uma única função compile

fs = require "fs"
jade = require "jade"
async = require "async"

# done callback will be passed (source, err)
exports.compile = (done, templatesDir) ->
    js = "var Templates = {}; nn"

    # get all files in templates directory
    fs.readdir templatesDir, (err, files) ->
        # keep only ".jade" files
        jadeFiles = files.filter (file) -> 
            file.substr(-5) == ".jade"

        # function to compile jade templates (appending to js source)
        compileTmpl = (file, doneCompile) ->
            # "test.jade" becomes "test"
            key = file.substr(0, file.indexOf("."))
            filePath = templatesDir + file
            fs.readFile filePath, (err, src) ->
                # store js function source into Templates.{key}
                js += "Templates." + key + " = " + jade.compile(src, { debug: false, client: true }).toString() + "; nn"
                doneCompile(err)

        # foreach jadeFile, compile template, then write templates.js file
        async.forEach jadeFiles, compileTmpl, (err) ->
            done(js, err)

Ele aceita 2 parâmetros: um doneretorno de chamada que é passado para a fonte JS dos modelos pré-compilados; e templatesDirespecificando a localização dos modelos Jade a serem compilados.

Ele lê todos os arquivos jade no diretório de modelos, compilando cada modelo para uso no lado do cliente com jade.compile(tmpl, {client: true, debug: false})em Templates.keyonde a chave é o nome do arquivo sem extensão. Ou seja, ExampleView.jadeserá compilado em Templates.ExampleView. Então usado como:

Templates.ExampleView()
ou Templates.ExampleView({ title: "Some title" })

Exemplo de uso com ExpressJS

require("coffee-script");
var jadePrecompiler = require("./jadePrecompiler.coffee"),
    precompiledTemplatesSource = "",
    doneCompile = function(source, err) {
      if (err) { throw err; } 
      precompiledTemplatesSource = source;
    };
jadePrecompiler.compile(doneCompile, "../client/templates/");

app.get("/js/templates.js", function(req, res) {
  res.set("Content-Type", "application/javascript");
  res.send(precompiledTemplatesSource);
});

Em seguida, no lado do cliente, inclua o jade runtime.js, inclua seu modelo e use-os como:Templates.something(locals)

Aqui, para simplificar as coisas, não considerei o caso em que jadePrecompiler.compilenão é concluído quando o pedido /js/templates.jsé feito.

Um exemplo em JS Fiddle: http://jsfiddle.net/qjDKH/

Related Posts