web-dev-qa-db-ja.com

流星でテンプレートを作成するジェイド

Meteor FAQ http://meteor.com/faq/how-do-i-package-a-new-templating-system (デフォルトのハンドルバーとは異なる)追加に関する情報があります。テンプレートシステム。 Jadeは、ドキュメントの他の場所で明示的に呼び出されている他の唯一の例です。

それで、誰かがすでにジェイドに取り組んでいますか?そうでない場合、私が始めることは可能ですか?それともまだ早すぎますか?例えば:

パッケージAPIは急速に変化しており、文書化されていないため、まだ独自のパッケージを作成することはできません。近日公開。

私は現在のEmber.jsプロジェクトでハンドルバーを愛そうとしていますが、私にとってはJadeほどエレガントなものはありません。

41
Jed

Jadeの統合を期待しています。 packages/handlebarsをテンプレートとして使用します。

基本的な戦略は、テンプレートエンジンの出力をMeteor.ui.renderにワイヤリングすることです。これは、ライブページの更新を実装する方法です。テンプレートがHTMLを返す限り、それは機能します。 JadeテンプレートがMeteor.CollectionドキュメントまたはSession変数を参照するときはいつでも、Meteorはその依存関係を登録して、データが変更されたときにテンプレートを再レンダリングすることを認識します。

ただし、さらに良いのは、Meteor.ui.chunkMeteor.ui.listChunkも使用することです。これらは、変更があったときにMeteorが実行しなければならない再計算の量を制限します。たとえば、Handlebars-speakで{{#each}}を使用してドキュメントのリストをレンダリングしている場合、新しいドキュメントが結果セットに入力されたときにテンプレート全体を再計算する理由はありません。新しいドキュメント用に1つのHTMLチャンクをレンダリングし、それをDOMに挿入するだけです。それが実際のlistChunkです。

したがって、Jadeでif/unlessfor/eachだけをインストルメント化することで、そこまでの道のりが長くなることがわかるでしょう。

パッケージ開発は、システムの他の部分ほど文書化されていないことに注意してください。ですから、行くにつれてより具体的な質問をすることを躊躇しないでください。

22
debergalis

流星> = 0.8.0

mquandalle:jade パッケージの使用は 公式に推奨 です。

流星<= 0.7.2

  1. CoffeeScriptを使用していない場合の場合は、 jade-handlebars を確認する必要があります。この記事の執筆時点では、CoffeeScriptテンプレートファイルをMeteor.startup関数内にラップする必要があるように思われる問題があり、他の問題が発生していました。

  2. CoffeeScriptを使用している場合は、私の Cakefile を確認する必要があります。詳細はすべて説明にありますが、短いバージョンでは、jadeファイルと一緒にhtmlファイルを自動的に追加/削除/更新します。 *.html.gitignoreに追加することになりました。これは、同じプロジェクトでhtmlとjadeを混在させていない場合にのみ機能します。ちょっとしたハックですが、今のところ私にとってはうまく機能しています。

16
David Weldon

私の最初の流星スマートパッケージをAtmosphereに公開するだけです!

HTML + Handlebarsの代わりにJade + Handlebarsを使用する

https://atmosphere.meteor.com/package/jade-handlebars

10
SimonDegraeve

Meteorプロジェクトで作業することを考えている翡翠を手に入れました!そして、それは実際の翡翠であり、翡翠ハンドルバーや翡翠の半分の形ではありません。それは素晴らしいですが、現在blaze-rc1と呼ばれる開発リリースにあるMeteorUIが必要です。そのため、現時点ではMeteor0.7では機能しません。

'mrt add jade'

'mrt --releaseblaze-rc1'を使用してmeteorプロジェクトを実行します

https://github.com/mquandalle/meteor-jade/

同じフォルダにcoffeescriptファイルとjadeファイルがある場合は、ファイル名の先頭に_を追加して、coffeescriptファイルの前にjadeファイルをロードします。そうしないと正しく機能しません。

3
Nearpoint

mrt add jade

client/views/templates/hello.jadeあなたはこのようなことをすることができます:

template(name="hello")
  h1 hello world!
  {{greeting}}

  input(type="button" value="click")

mrtでアプリを起動します

1
lfender6445