4

我想在客户端使用 Jade 模板和 Backbone。我怎样才能做到这一点？

目前，我已成功配置 Backbone (Marionette) 来编译 Jade 模板以在其视图中使用：

Marionette.TemplateCache.prototype.compileTemplate = (tmplStr) ->
    console.log "jade stuff: ", jade.compile(tmplStr)
    return jade.compile(tmplStr)

“问题”是：我目前正在编写如下模板：

script(type="text/template", id="tmplMainView")
    | h1= title
    | p= content

注意管道 ( |) 是为了防止 Jade 试图在服务器端解释/解析它们。我怎样才能消除那些？

更新

也许我可以使用jade --client标志......但它提供了一个编译函数：例如

h1= title

变成

function anonymous(locals, attrs, escape, rethrow, merge) {
attrs = attrs || jade.attrs; escape = escape || jade.escape; rethrow = rethrow || jade.rethrow; merge = merge || jade.merge;
var buf = [];
with (locals || {}) {
var interp;
buf.push('<h1>');
var __val__ = title
buf.push(escape(null == __val__ ? "" : __val__));
buf.push('</h1>');
}
return buf.join("");
}

这意味着我必须为每个模板有 1 个 Jade/编译的 JS？我该如何使用它？另外我认为许多 JS 文件是一种缓慢的工作方式？但是由于模板函数都被命名为匿名，那么我怎样才能连接或以某种方式有效地使用它们呢？

4

2 回答 2

5

检查ClientJade项目。

从他们的网站：

clientjade 是一个命令行工具，用于将您的 Jade 模板编译成客户端模板，以便在浏览器中使用。它会自动包含渲染模板所需的一切，无需包含jade.js 或runtime.js。

$ clientjade test1.jade test2.jade > templates.js

然后在你的 html 中包含 template.js 文件。要渲染模板，只需像这样调用：

//jade.render(domNode, templateName, data);    
jade.render(document.getElementById('test1'), 'test1', { name: 'Bob' });
于 2012-12-27T13:23:12.767 回答
3

在查看了 Jadify 和 ClientJade 并在此过程中遇到了一些问题......（也许只是我错过了一些东西）之后，我决定探索简单地在服务器端编译模板。

我定义了一个 Node 模块（由 ExpressJS 使用），它进行编译并返回编译后的 JS 源代码（我使用它/js/templates.js）。

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

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

    # 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() + "; \n\n"
                doneCompile(err)

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

我在客户端使用预编译的模板，包括templates.js并使用以下模板：

  • Templates.tmpl1()
  • Templates.tmpl2({ something: "Hello world", ... })

更多关于https://coderwall.com/p/hlojkw

于 2012-12-28T09:32:33.390 回答