web-dev-qa-db-ja.com

Jadeテンプレート（jade-lang.com）クライアント側の使用

クライアント側でJadeテンプレートを使用したいと思います。できればRails 3.1アセットパイプラインを使用して生成されます。これを行う方法を本当に理解できません。

同じ問題に遭遇し、素晴らしい解決策を見つけた人はいますか？どんな考えでも大歓迎です。

javascriptruby-on-railsnode.jstemplate-enginepug
23
sandstrom

PS：おそらく今 サブスタックの答え の方が良いです

browserify

多分あなたは https://github.com/substack/node-browserify を使用できます

ノードモジュールとnpmパッケージのブラウザー側require（）

1つまたは2つのjavascriptファイルをbrowserifyに指定するだけで、ASTをたどってすべてのrequire（）を再帰的に読み取ります。結果のバンドルには、インストールしたライブラリの取り込みなど、必要なものがすべて含まれていますnpmを使用して！

ブラウザ

http://jsperf.com/dom-vs-innerhtml-based-templating/5 =>このベンチマークによると、パフォーマンスはそれほど優れていません=> http：// Gist .github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/jade.js 。しかし、TJによると、ブラウザでの使用は想定されておらず、代わりにnode.jsが使用されていました。その場合はかなり高速になります。代わりにブラウザで使用できる代替手段がたくさんあります。

7
Alfred

browserify を使用する場合、便利なjadeミドルウェア jadeify を使用できます。次に、ミドルウェアでビューディレクトリをポイントした後、ブラウザ側でjadeify("foo.jade", { x : 4, y : 5 })を呼び出すだけで、jqueryハンドルを取得できます。

31
substack

チェックアウト ブレード 。これは、クライアント側（およびサーバー側）で使用するために設計されたJadeのようなHTMLテンプレートエンジンです。他にもあなたが気に入っているかもしれない機能がいくつかあります。

EDIT：ただし、Node.jsサーバーのみ。現時点ではRuby実装はありません。

7
BMiner

この機能は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);

たとえば、関数（例ではfn）を.jsファイルに書き込んで、コンパイルされたjavascript関数をクライアントに渡し、.jsファイルをスクリプトタグ付きのhtmlファイルに含める必要があります。

別のオプションは templatizer を使用することで、jadeを.jsファイルにコンパイルします。

5
shak

私は tilt-jade と呼ばれる宝石をアセットパイプライン内で作成しました。 EJSがデフォルトでスプロケットを使用する場合とまったく同じように機能します。Jadeテンプレートを関数にレンダリングして、クライアント側で呼び出すことができるようにします。それが素晴らしい解決策であるかどうかはわかりませんが、私のニーズには問題なく機能しています。

3
therabidbanana

クライアント側のhtmlでjadeを使用できるようにするライブラリを作成しました。 <jade> ... </ jade>と同じくらい簡単です。確認してください： https://github.com/charlieamer/jade-query

2
charlieamer

Jadeはデフォルトでクライアントのコンパイルをサポートするようになりました。使用 -c --clientオプション。 http://jade-lang.com/command-line を参照してください。

2
Mihai Rotaru

これは、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'});

したがって、必要な特定のテンプレートのみをクライアントに送信し、browsifyはランタイムのコピーが1つだけであることを確認します。

1
Ian Warburton