2013-06-26 17 views
7

私は、Handlebarsテンプレートシステムに大きく依存するember.jsライブラリを使用して、javascriptでアプリケーションを作成しようとしています。しかし、私はまた、jinjaのテンプレートシステムを使用しているFLASKを使用しています。ハンドルバーやジンジャーのような2つのHTMLテンプレートを使用できますか?

両方のテンプレートレンダラーを同時に使用できますか?または、別のものを使用する必要がありますか?フラスコとember.jsの両方を使って経験を積んだ人は、どちらが他のものと交換しやすくなるのか知っていますか?(おそらく、ハンドルバーはJinjaを交換する方が簡単かもしれません。

答えて

7

これら2つのテンプレートエンジンは異なる場所にあります。 Jinja2はサーバー側で実行され、Handlebarsはクライアント側で実行されます。必要に応じて、干渉なしで両方を使用することができます。

しかし、ember.jsのようなリッチクライアントフレームワークを使用している場合は、サーバー側のテンプレートを使用する必要はありません。あなたの状況では、Flaskサーバーはajaxリクエストを介してember.jsクライアントにデータを提供するルートを持つ可能性が高いので、クライアントは本当にテンプレートレンダリングが行われるのに最適な場所です。

+0

私はサーバ用にnode.jsを使用していますが、ハンドルバーのテンプレートとjadeの組み合わせを使用しています。翡翠はまだ私に、そして最も重要なことに、私のデザイナーと他の非技術者に非常に簡単に編集できるファイルを提供します。 (まだ生のHTMLを編集することができますが、翡翠は本当にきれいです)ハンドルバーのアクションとリンクを入れなければならないときは、単にテンプレート内で生のhtmlを使用します。私たちのためにうまく動作します。 – WallMobile

+8

最高のWebアプリケーション(最もパフォーマンスの高い)は、最初の読み込み時に完全なHTMLページをレンダリングし、それを更新するためにクライアント側のレンダリングを使用します。最初のページを完全にブートストラップするためにクライアントに依存すると、ページの負荷が大幅に増加します(その後のajax呼び出しが必要です)。 –

+0

注意する必要があります - ハンドルバーはいずれの側でもレンダリングできますが、Jinjaはクライアント側ではまれです。 – cwallenpoole

2

@Miguelは、ember.jsを使用している場合、Jinja2は本当に必要ないと言っています。これらのテンプレートをレンダリングしたくない場合は、単にflask.send_file(ここであなたのhtmlファイルを返します)代わりにflask.render_template(あなたのhtmlファイルはここにあります)を返します。詳細は、docsを参照してください。

+2

htmlファイルを静的ファイルとして扱う方が良いです。開発中、Flaskは "static"フォルダから直接Flaskを提供することができます。プロダクションの際、WebサーバーはFlaskをバイパスしてこれらのファイルを提供する必要があります。 ajaxリクエストにはFlaskのみを使うべきです。あなたのプロジェクトに幸運を祈る! – Miguel

1

@Miguelと@Aliの両方に根本的に同意していますが、私が協力したいくつかの企業は、API用のRESTfulモデルとサーバー生成のHTMLを組み合わせています。 [注:エンバーを使用している場合これはケースではありませんが、私は私の現在のクライアントのコードベースにフラスコ/ Jinja2のバックボーンで働いています。]

私は実際にいくつかに基づいて、Pybarsを使用して解決策を見つけましたKhan Academy's style guideからの読み取り:

@app.template_filter("handlebars") 
def handlebars_filter(context, filepath): 
    source = open(filepath, "r").read().decode('utf-8') 
    template = pybars.Compiler().compile(source) 

    return Markup(u"".join(template(context))) 
3

あなたはそれを無視するJinja2のを伝えるために{% raw %}ように、コードのセクションをマークすることができます。 handlebars.jsテンプレートを以下のように生のタグで囲みます:

{% raw %} 
<script id="foo-template" type="text/x-handlebars-template"> 
    <p>{{foo}} - {{bar}}</p> 
</script> 
{% endraw %} 
関連する問題