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

Question

我想在客戶端使用Jade模板。 最好使用Rails 3.1資產管道生成。 我無法弄清楚如何做到這一點。

任何人偶然發現了同樣的問題並找到了一個很好的解決方案？ 任何想法都非常感激。

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

Answer 1

如果你使用browserify，你可以使用這個方便的玉器中間件： jadeify 。 然后你可以在中間件指向一個視圖目錄后調用jadeify("foo.jade", { x : 4, y : 5 })瀏覽器端，然后返回一個jquery句柄。

Answer 2

結賬刀片 。 它是一個類似Jade的HTML模板引擎，專為客戶端（和服務器端）使用而設計。 您也可以使用其他一些功能。

編輯：但是，僅適用於Node.js服務器。 目前沒有Ruby實現。

Answer 3

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

---

browserify

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

瀏覽器端require（）用於節點模塊和npm包

只需在browserify上指向一個或兩個javascript文件，它將遍歷AST以遞歸方式讀取所有require（）。 生成的軟件包包含您需要的所有內容，包括使用npm提取可能已安裝的庫！

瀏覽器

http://jsperf.com/dom-vs-innerhtml-based-templating/53 =>根據這個基准測試表現並不是那么好=> http://gist.github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/ jade.js。 但根據TJ，它從來不應該在瀏覽器中使用，而是在node.js中使用。 在那種情況下，它會非常快。 您可以在瀏覽器中使用很多替代方案。

Answer 4

此功能現在可在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文件中。

另一種選擇是使用templatizer ，它將jade編譯為.js文件。

Answer 5

我寫了一個名為tilt-jade的gem來在資產管道中執行此操作。 它的工作方式與EJS默認使用sprockets一樣 - 它將Jade模板渲染為函數，因此它們可以稱為客戶端。 我不確定這是一個很好的解決方案，但它可以滿足我的需求。

Answer 6

Jade現在支持默認為客戶端編譯; 使用-c --client選項。 請參見http://jade-lang.com/command-line 。

Answer 7

我剛剛創建了一個庫，用於在客戶端html中創建jade。 它就像<jade> ... </ jade>一樣簡單。 看看： https ： //github.com/charlieamer/jade-query

Answer 8

下面是哈克，但簡單的版本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確保您只有一個運行時副本。