web-dev-qa-db-ja.com

Backbone.jsでHAMLテンプレートを使用するための最良の戦略

私はBackbone.jsにアクセスしてプロジェクトのJavaScriptコードを構造化し、バックエンド（Rails）でのテンプレート化にHAMLが好きなので、バックボーンビューのテンプレート化に使用したいと思います。 https://github.com/creationix/haml-js のようなJavaScriptへのHAMLポートがいくつかあり、バックボーンはJSTと口ひげを簡単にサポートしています。

代わりにhamlテンプレートを使用する最良の方法は何ですか。

クライアント側でHAMLを使用することの欠点はありますか？パフォーマンス、追加のスクリプト読み込み時間（jammitなどのアセットパッケージツールで処理）

javascripttemplateshamlbackbone.js
38
Vlad Gurovich

私はあなたがすでにそれを述べたのを知っています、しかし私はJammitでhaml-jsを使うことを勧めますjavascriptsとassets.ymlにhaml.jsを含めるだけで、template_function: Hamlを追加し、テンプレートファイルをパッケージに含めます。例えば.

  javascript_templates:
    - app/views/**/*.jst.haml

次に、ビューにこのパッケージ（= include_javascripts :javascript_templates）を含めることができ、Jammitは.jst.hamlファイルをwindow.JST['file/path']にパッケージ化します。 （ページのソースを表示すると、<script src="/assets/javascript_templates.jst" type="text/javascript"></script>のようなJavaScriptファイルが表示されます）

これらのテンプレートを使用するには、Jammitが作成したJSTの1つを呼び出すだけです。つまり.

$('div').html(JST['file/path']({ foo: 'Hello', bar: 'World' }));

そして、JammitはHaml-jsテンプレート関数関数を使用してテンプレートをレンダリングします。

注：haml-jsが機能するために必要な改行文字をサポートする最新バージョンを取得するには、GemfileでJammitのgithubリポジトリを必ずポイントしてください。

26
Craig

haml-coffee を試してみましょう。 （しゃれはありません）私はコーヒースクリプトの賞賛を十分に歌うことができません。さらに、現在Rails 3.1のデフォルトです。これで、好きなテンプレート言語にcoffeescriptを埋め込んで、たくさんコンパイルすることができます。

ああ、喜び..それを機能させるために。

14
Duke

私はこれが問題をいくらか回避するだろうことを知っていますが、ここで私たちは行きます:)

私はRails app私はバックエンドのすべてのビューにhamlを使用しています。それは素晴らしいです。いくつかの理由（主にi18n）のため、クライアント側でテンプレートを使用したくないのです。これは私がやる：

  • Ruby hamlにすべてのテンプレートを作成し、それらをファンキーなタイプのスクリプトタグに格納します（text/js-templateを使用します）。これにより、jqueryとバックボーンで操作できるレンダリング済みのhtmlが作成されます。
  • バックボーンビューを作成するときに、保存されているテンプレートをロードしてドキュメントに追加します
  • 既存のテンプレートを変更してビューをレンダリングする

あなたはhtmlのみを扱い、jQueryはそのために素晴らしいです。 i18nを必要としない一部のビューでは、アンダースコアテンプレートを使用しています。

Hamlテンプレートのパフォーマンスに関しては、口ひげとハンドルバーの方が速いようです。

6
Julien

私はRails 3/Backbone appに取り組んでいて、 hamlbars 、 haml_assets を評価してから遊んだ後、別のアプローチをとっています haml-js 。

これらはすべて、問題の解決策を提供する確かな宝石であり、それぞれに一定のトレードオフがあります。たとえば、Haml-jsはクライアント側でテンプレートをレンダリングする必要があります（これには何も問題はありません。単にトレードオフです）。 Hamlbarsとhaml_assetsはどちらもアセットパイプラインにプラグインしますが、リクエストオブジェクトの外に存在するため、一部のヘルパーは機能しません。どちらもこれに対していくつかの調整を行い、URLヘルパーとActionViewヘルパーを含みますが、ビューでhamlを書き込むのと同じ機能を期待していません。

私のアプローチはややかさばります（これをエンジンに組み込む予定です）が、うまく機能し、簡単に複製できます。可能な場合はhaml_assetsを使用しますが、「show」アクションを使用して「templates」コントローラーからテンプレートの提供にフォールバックします

  • ビューをview/templates /ディレクトリに配置します
  • このビューをレンダリングするレイアウトをJST関数に追加できます。
  • コンテンツタイプとして「application/javascript」を返すshowアクションを指定できます
  • テンプレートを作成するときに、すべてのヘルパーにアクセスできます
  • 「/ template/whatever」のスクリプトタグを追加して、あらゆるテンプレートをレンダリングするか、ルートグロビングを使用して、より適切に整理されたビューを作成できます。

このアプローチの利点は、ビューがコントローラーからアクセスできるため、ビューをjstテンプレートとして（テンプレートコントローラーを介して）レンダリングするか、他のコントローラーをパーシャルとしてレンダリングするかを選択できることです。これにより、ユーザーがキャッシュされたテンプレート/ templates/widgets/super-cool-widgetを取得する可能性がある場合、URLから直接（/ products/widgets/super-cool-widgetなど）seoフレンドリーなページを提供できます。

2
mhamrah

クレイグのスレッドでインラインで回答することはできません（既存の回答に投稿するには、ある種の評判が必要だと思います）が、haml-jsを使用するためにjammitのフォークを取得する必要はありません-コミットによりジャミットのメインブランチ。詳細はこちらをご覧ください： https://github.com/documentcloud/jammit/commit/b52e429f99cac3cd1aa2bf3ab95f1bfaf478d50d

編集：最後のgemリリースは1月で、コミットは3月に追加されたため、githubリポジトリに対して実行するか、ローカルでビルドするようにバンドルを設定する必要があります。 HEAD of jammitを使用しない場合、改行が削除されるため、テンプレートを適切に解析するのに問題が発生します。

これを設定するために必要なのは次のとおりです。

1）以下を「assets.yml」ファイルに追加します。

template_function： "Haml"

2）ロードしたいhaml-jsソースとテンプレートをアセットファイルに追加します：javascripts：core：-public/javascripts/vendor/haml.js templates：-app/views/events/_form.haml.jst

3）application.html.erbにコアとテンプレートの両方をロードしていたことを確認します

<％= include_javascripts：core、：templates％>

4）JST [ファイル名]（つまり、この場合はJST ['_ form']）を介してソースファイルのテンプレートにアクセスします。言及する価値のある1つのこと-jammitはすべてのテンプレートを調べ、それらを共通のパスに名前空間を付けます。そのため、app/views/foo/file.jstとapp/views/bar/file.jstがあれば、アクセスできます。 JST ['foo/file.jst']およびJST ['bar/file.jst']。 app/views/foo/file1.jstとapp/views/foo/file2.jstがある場合、それらは直接JST ['file1.jst']とJST ['file2.jst']にあります-これは最初のいくつかのテンプレートを使い始めると、忘れがちです。

すべてがかなりうまくいきました。 Craigが関数を定義する必要があった理由がわかりません-haml.jsによって提供されるデフォルトのHaml関数を使用しただけですが、何か不足しています。

1
ragaskar

https://github.com/netzpirat/haml_coffee_assets のように表示され、必要なものが提供されます。 （window.JSTテンプレート、HAMLで記述、インラインcoffescriptサポートあり）

0
Jordan Feldstein

Middlemanをチェックしてください。これには、haml、sass、coffee、slimなどが含まれます。Railsのような宝石を使用し、他の多くの素晴らしい機能を備えています。

http://middlemanapp.com/

バックボーンのカスタム拡張 https://github.com/middleman/middleman-backbone

また、それを静的なhtml、css、jsに組み込んで、超高速の読み込みを行うこともできます。

0
Blaine Hatab