使用Jade模板（jade-lang.com）客户端

我想使用Jade模板客户端。 最好使用Rails 3.1资产pipe道生成。 我真的不知道如何做到这一点。

谁遇到同样的问题，并find一个很好的解决scheme？ 任何想法都非常感激。

• http://jade-lang.com/
• http://ryanbigg.com/guides/asset_pipeline.html

Answer 1

PS：也许现在Substack的答案是更好的。

---

browserify

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

浏览器端require（）用于你的节点模块和npm包

只需在browserify上指定一个或两个javascript文件，它就会使AST以recursion方式读取所有require（）。 结果包中包含了你需要的所有东西，包括你可能使用npm安装的库。

浏览器

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

Answer 2

如果你使用浏览器，你可以使用这个方便的中间件： jadeify 。 然后你可以在中间件中指定一个views目录之后调用jadeify("foo.jade", { x : 4, y : 5 })浏览器端，并返回一个jquery句柄。

Answer 3

结帐刀片 。 它是一种类似于Jade的HTML模板引擎，专为客户端（和服务器端）使用而devise。 还有一些你们可能会喜欢的其他function。

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

Answer 4

这个function现在在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文件包含在html文件中。

另一种select是使用templatizer ，它将jade编译为一个.js文件。

Answer 5

我在资产pipe道里写了一个名叫翡翠的gem。 它的工作原理与EJS默认的JS链接一样 – 将Jade模板渲染为函数，以便将它们称为客户端。 我不确定这是一个很好的解决scheme，但是它对我的需求起到了很好的作用。

Answer 6

我刚刚build立了一个库，可以在客户端的html中使用jade。 就像<jade> … </ jade>一样简单。 检查出来： https ： //github.com/charlieamer/jade-query

Answer 7

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

Answer 8

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

 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确保你只有一个运行时拷贝。