使用 Jade 模板 (jade-lang.com) 客户端答案

【问题标题】：Using Jade Templates (jade-lang.com) client-side使用 Jade 模板 (jade-lang.com) 客户端
【发布时间】：2011-09-28 09:04:57
【问题描述】：

我想在客户端使用 Jade 模板。最好使用 Rails 3.1 资产管道生成。我真的不知道该怎么做。

有谁偶然发现了同样的问题并找到了很好的解决方案？任何想法都非常感谢。

【问题讨论】：

查看railstech.com/2011/08/custom-pre-processor-in-rails-3-1

标签： javascript ruby-on-rails node.js template-engine pug

【解决方案1】：

Jade 现在默认支持为客户端编译；使用-c --client 选项。见http://jade-lang.com/command-line。

【讨论】：

【解决方案2】：

此功能现在在 Jade 中可用。 http://jade-lang.com/api/

来自他们的 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);

您应该将编译后的 javascript 函数传递给客户端，例如将函数（示例中的 fn）写入 .js 文件，然后将 .js 文件包含在带有 script 标签的 html 文件中。

另一种选择是使用templatizer，它会为您将jade 编译成一个.js 文件。

【讨论】：

如何在服务器上编译一个jade文件然后在浏览器上调用生成的函数并不明显。你能详细说明一下吗？

【解决方案3】：

这是使用gulp-jade 的browserify 的一个hacky 但简单的版本。

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

然后在我的客户端 JS 文件中...

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

因此，您只需将所需的特定模板发送给客户端，browserify 会确保您只有一份运行时副本。

【讨论】：

【解决方案4】：

我刚刚制作了一个库，用于在客户端 html 中提供 Jade。就像... 一样简单。看看吧：https://github.com/charlieamer/jade-query

【讨论】：

【解决方案5】：

PS：现在Substack's answer 可能更好。

浏览

也许你可以使用https://github.com/substack/node-browserify

您的节点的浏览器端 require() 模块和 npm 包

只需将一个或两个 javascript 文件指向 browserify 它将把 AST 带到递归地阅读你所有的 require()。生成的捆绑包拥有一切你需要，包括拉进来您可能已经安装的库使用 npm！

浏览器

http://jsperf.com/dom-vs-innerhtml-based-templating/53 => 根据这个基准，性能不是很好 => http://gist.github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/jade.js。但根据 TJ 的说法，它不应该在浏览器中使用，而是 node.js。在这种情况下，它会非常快。您可以在浏览器中使用许多替代方案。

【讨论】：

很棒的建议，天哪，它可以与普通 Jade 一起使用，但这会很好用。此外，它是一个更广泛的解决方案，也适用于其他 node.js 模块！

【解决方案6】：

结帐Blade。它是一个类似 Jade 的 HTML 模板引擎，专为客户端（和服务器端）使用而设计。还有一些你们可能喜欢的其他功能。

编辑： 但是，仅适用于 Node.js 服务器。目前没有 Ruby 实现。

【讨论】：

【解决方案7】：

我编写了一个名为 tilt-jade 的 gem 来在资产管道中执行此操作。默认情况下，它的工作方式与 EJS 对 sprocket 的工作方式完全相同——它将 Jade 模板呈现为函数，因此它们可以被称为客户端。我不确定这是否是一个很好的解决方案，但它可以满足我的需求。

【讨论】：

【解决方案8】：

如果你使用browserify，你可以使用这个方便的jade中间件：jadeify。然后你可以在中间件指向一个views目录后调用jadeify("foo.jade", { x : 4, y : 5 }) browser-side，你会得到一个jquery句柄。

【讨论】：