23

クライアント側でJadeテンプレートを使用したいのですが。Rails3.1アセットパイプラインを使用して生成することが望ましい。私はこれを行う方法を本当に理解することはできません。

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

4

8 に答える 8

31

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

于 2011-07-08T11:05:30.033 に答える
7

PS：おそらく今のところサブスタックの答えの方が良いでしょう。

browserify

たぶんあなたはhttps://github.com/substack/node-browserifyを使うことができます

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

javascriptファイルを1つか2つbrowserifyに向けるだけで、ASTがすべてのrequire（）を再帰的に読み取るようになります。結果として得られるバンドルには、npmを使用してインストールした可能性のあるライブラリを取り込むなど、必要なものがすべて含まれています。

ブラウザ

http://jsperf.com/dom-vs-innerhtml-based-templating/53= >このベンチマークによるとパフォーマンスはそれほど良くありません=> http://gist.github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/ jade.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ファイルをhtmlファイルに含めます。

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

于 2014-10-11T23:19:17.313 に答える
3

アセットパイプライン内でこれを行うために、tilt-jadeと呼ばれるgemを作成しました。これは、EJSがデフォルトでスプロケットを使用する場合とまったく同じように機能するように作られています。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>と同じくらい簡単です。それをチェックしてください：https ：//github.com/charlieamer/jade-query

于 2014-09-16T13:28:37.407 に答える
1

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はランタイムのコピーが1つしかないことを確認します。

于 2014-12-10T17:54:31.717 に答える