Question

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

目前，我已成功配置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文件工作起来很慢？但由于模板函数都是匿名的，我怎么能连接或以某种方式有效地使用它们呢？

Answer 1

检查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' });

Answer 2

在看完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

服务客户端Jade模板

2 个答案: