23

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

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

4

8 回答 8

31

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

于 2011-07-08T11:05:30.033 回答
7

PS：可能现在Substack的答案更好。

浏览器化

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

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

只需在 browserify 上指向一个或两个 javascript 文件，它就会遍历 AST 以递归方式读取您的所有 require()。生成的包包含您需要的一切，包括拉入您可能使用 npm 安装的库！

浏览器

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

于 2011-07-05T08:55:02.740 回答
7

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

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

于 2012-05-11T17:39:27.100 回答
5

此功能现在在 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，它会为您将 jam 编译为 .js 文件。

于 2014-10-11T23:19:17.313 回答
3

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

于 2011-11-21T16:13:50.807 回答
2

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

于 2014-06-28T15:11:09.910 回答
2

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

于 2014-09-16T13:28:37.407 回答
1

这是一个 hacky 但简单的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'));
});

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

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

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

于 2014-12-10T17:54:31.717 回答