4

Backbone を使用してクライアント側で Jade テンプレートを使用したいと考えています。どうやってやるの？

今のところ、ビューで使用する Jade テンプレートをコンパイルするように Backbone (Marionette) を正常に構成しました。

Marionette.TemplateCache.prototype.compileTemplate = (tmplStr) ->
    console.log "jade stuff: ", jade.compile(tmplStr)
    return jade.compile(tmplStr)

「問題」は次のとおりです。現在、次のようなテンプレートを作成しています。

script(type="text/template", id="tmplMainView")
    | h1= title
    | p= content

|Jade がサーバー側でパイプを解釈/解析しようとするのを防ぐためのパイプ ( ) に注意してください。どうすればそれらを排除できますか?

アップデート

おそらくjade --clientフラグを使用できます...しかし、それは単一のコンパイル済み関数を提供します:たとえば

h1= title

なる

function anonymous(locals, attrs, escape, rethrow, merge) {
attrs = attrs || jade.attrs; escape = escape || jade.escape; rethrow = rethrow || jade.rethrow; merge = merge || jade.merge;
var buf = [];
with (locals || {}) {
var interp;
buf.push('<h1>');
var __val__ = title
buf.push(escape(null == __val__ ? "" : __val__));
buf.push('</h1>');
}
return buf.join("");
}

つまり、テンプレートごとに 1 つの Jade/コンパイル済み JS が必要ですか? どのように使用すればよいですか？また、多くのJSファイルは動作が遅いと思いますか? しかし、テンプレート関数はすべて匿名で名前が付けられているため、それらを連結したり、何らかの方法で効果的に操作したりするにはどうすればよいでしょうか?

4

2 に答える 2

5

ClientJadeプロジェクトを確認します。

彼らのサイトから：

clientjade は、jade テンプレートをブラウザーで使用するクライアント側のテンプレートにコンパイルするためのコマンド ライン ツールです。テンプレートをレンダリングするために必要なすべてが自動的に含まれます。jade.js や runtime.js を含める必要はありません。

$ clientjade test1.jade test2.jade > templates.js

次に、html に template.js ファイルを含めます。テンプレートをレンダリングするには、次のように呼び出します。

//jade.render(domNode, templateName, data);    
jade.render(document.getElementById('test1'), 'test1', { name: 'Bob' });
于 2012-12-27T13:23:12.767 に答える
3

Jadify と ClientJade を見て、途中でいくつかの問題に遭遇した後... (おそらく私が見逃したものです)、単純にサーバー側でテンプレートをコンパイルすることを検討することにしました。

コンパイルを行い、コンパイル済みの JS ソース (私が提供したもの) を返す Node モジュール (ExpressJS で使用) を定義しました/js/templates.js。

fs = require "fs"
jade = require "jade"
async = require "async"

# done callback will be passed (source, err)
exports.compile = (done, templatesDir) ->
    js = "var Templates = {}; \n\n"

    # get all files in templates directory
    fs.readdir templatesDir, (err, files) ->
        # keep only ".jade" files
        jadeFiles = files.filter (file) -> 
            file.substr(-5) == ".jade"

        # function to compile jade templates (appending to js source)
        compileTmpl = (file, doneCompile) ->
            # "test.jade" becomes "test"
            key = file.substr(0, file.indexOf("."))
            filePath = templatesDir + file
            fs.readFile filePath, (err, src) ->
                # store js function source into Templates.{key}
                js += "Templates." + key + " = " + jade.compile(src, { debug: false, client: true }).toString() + "; \n\n"
                doneCompile(err)

        # foreach jadeFile, compile template, then write templates.js file
        async.forEach jadeFiles, compileTmpl, (err) ->
            done(js, err)

そして、クライアント側でコンパイル済みのテンプレートを使用し、次のtemplates.jsようなテンプレートを使用します。

  • Templates.tmpl1()
  • Templates.tmpl2({ something: "Hello world", ... })

https://coderwall.com/p/hlojkwの詳細

于 2012-12-28T09:32:33.390 に答える