Javascript 使用 Jade 模板 (jade-lang.com) 客户端
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6575743/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Jade Templates (jade-lang.com) client-side
提问by sandstrom
I'd like to use Jade templates client-side. Preferably generated using the Rails 3.1 asset pipeline. I can't really figure out how to do this.
我想在客户端使用 Jade 模板。最好使用 Rails 3.1 资产管道生成。我真的不知道如何做到这一点。
Anyone who've stumbled upon the same problem and found a great solution? Any thoughts are much appreciated.
有谁偶然发现了同样的问题并找到了很好的解决方案？任何想法都非常感谢。
采纳答案by Alfred
P.S: Probably right now Substack's answeris better.
PS：现在Substack的答案可能更好。
browserify
浏览器化
Maybe you can use https://github.com/substack/node-browserify
也许你可以使用https://github.com/substack/node-browserify
Browser-side require() for your node modules and npm packages
Just point a javascript file or two at browserify and it will walk the AST to read all your require()s recursively. The resulting bundle has everything you need, including pulling in libraries you might have installed using npm!
用于 node 模块和 npm 包的浏览器端 require()
只需在 browserify 中指向一个或两个 javascript 文件，它就会遍历 AST 以递归方式读取所有的 require() 。生成的包拥有您需要的一切，包括拉入您可能使用 npm 安装的库！
Browser
浏览器
http://jsperf.com/dom-vs-innerhtml-based-templating/53=> The performance isn't that great according to this benchmark => http://gist.github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/jade.js. But according to TJ it was never supposed to be used in the browser, but node.js instead. In that case it is going to be pretty fast. There are a lot of alternatives which you can use in the browser instead.
http://jsperf.com/dom-vs-innerhtml-based-templating/53=> 根据这个基准，性能不是很好 => http://gist.github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/玉石.js。但是根据 TJ 的说法，它永远不应该在浏览器中使用，而是使用 node.js。在这种情况下，它会非常快。您可以在浏览器中使用很多替代方法。
回答by substack
If you use browserifyyou can use this handy jade middleware: jadeify.
Then you can just call jadeify("foo.jade", { x : 4, y : 5 })browser-side after pointing a views directory at the middleware and you get back a jquery handle.
如果你使用browserify，你可以使用这个方便的 jade 中间件：jadeify。然后，您可以jadeify("foo.jade", { x : 4, y : 5 })在将视图目录指向中间件后调用浏览器端，并返回一个 jquery 句柄。
回答by BMiner
Checkout Blade. It is a Jade-like HTML template engine that is designed for client-side (and server-side) use. There are some other features that you guys might like, as well.
结帐刀片。它是一个类似 Jade 的 HTML 模板引擎，专为客户端（和服务器端）使用而设计。还有一些其他功能，你们可能会喜欢。
EDIT:But, only for Node.js servers. There is no Ruby implementation at this time.
编辑：但是，仅适用于 Node.js 服务器。目前没有 Ruby 实现。
回答by shak
This feature is now available in Jade. http://jade-lang.com/api/
此功能现在在 Jade 中可用。 http://jade-lang.com/api/
From their API Documentations:
来自他们的 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);
You should pass the compiled javascript function to the client, for example by writing the function (fn in the example) to a .js file and then include the .js file in the html file with script tag.
您应该将编译后的 javascript 函数传递给客户端，例如将函数（示例中的 fn）写入 .js 文件，然后将 .js 文件包含在带有脚本标记的 html 文件中。
Another option is using templatizer, which compiles jade to a .js file for you.
另一种选择是使用templatizer，它将 jade 编译为 .js 文件。
回答by therabidbanana
I wrote a gem called tilt-jadeto do this within the asset pipeline. It's made to work exactly like EJS does with sprockets by default - it renders Jade templates down into functions so they can be called client side. I'm not sure it's a great solution, but it has worked okay for my needs.
我写了一个名为tilt-jade的gem来在资产管道中做到这一点。默认情况下，它的工作方式与 EJS 对链轮的作用完全相同——它将 Jade 模板呈现为函数，因此它们可以被称为客户端。我不确定这是一个很好的解决方案，但它已经满足我的需求。
回答by Mihai Rotaru
Jade now supports compiling for the client by default; use the -c --clientoption. See http://jade-lang.com/command-line.
Jade 现在默认支持为客户端编译；使用该-c --client选项。请参阅http://jade-lang.com/command-line。
回答by charlieamer
I've just made a library for making jade available in client-side html. It is as simple as < jade>...< /jade>. Check it out: https://github.com/charlieamer/jade-query
我刚刚制作了一个库，用于在客户端 html 中提供 jade。它就像<玉>...</玉>一样简单。看看：https: //github.com/charlieamer/jade-query
回答by Ian Warburton
Here's a hacky but simple version for browserifyusing gulp-jade.
这是browserify使用gulp-jade.
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'));
});
Then in my client side JS file...
然后在我的客户端 JS 文件中...
var template = require('./path_to_compiled_template_file');
var renderedTemplateHtml = template({ aLocal: 'blah blah'});
So you only send to the client the specific templates you need and browserify makes sure you only have one copy of the runtime.
因此，您只需将所需的特定模板发送给客户端，而 browserify 可确保您只有一份运行时副本。
