0

Facebook からデータを取得する Meteor アプリに取り組んでおり、プレゼンテーションに jquery-layout を使用したいと考えています。jquery を使用してリアクティブ テンプレートの HTML を変更しようとすると、いくつかの「微妙な点」があるのではないかと考えたので、次のような比較的単純なテスト ケースを設定しました (簡潔にするために言い換えています)...

<body>
{{> mainTemplate}}
</body>

<template name="mainTemplate">
  {{#with userInfo}}  
  {{> partialNorth}}  
  {{> partialWest}}  
  {{> partialCenter}}  
  {{> partialEast}}  
  {{/with}}  
  {{layItOut}}  
</template>

Template.mainTemplate.userInfo は、デフォルト値で始まり、Facebook からの情報で非同期に更新される Session 変数の内容を返します。

Template.mainTemplate.layItOut は、5 行の jquery-layout コードを実際に実行するコールバック fcn を使用して Meteor.defer への呼び出しをセットアップします。

そして、それはかなりうまくいくようです...

  • 最初の表示は期待どおり/意図したとおりです (ただし、ページがレイアウトされていない短い期間があります)

  • リアクティブ コンテキストが更新されると、レイアウトが再実行されます (ここでも、簡潔だが目に見える再レイアウトが使用されます)。

それで、なぜ私は泣き言を言っているのですか？ほとんどの場合、目立った再レイアウト アクティビティを排除する、よりクリーンなアプローチを見つけたいと考えています。

リアクティブ コンテキストをより細かくすることもできますが、これが本当に役立つかどうかはわかりません。

あるいは、レンダリングを直接制御して実験することもできると思います (たとえば、 Meteor.ui.render() を使用しますが、それは大変な作業のように思えます ;-)

私が本当に好きなのはどちらかだと思います

a) Meteor のレンダリング イベントにフックする方法

またはまだ良い

b）クエリレイアウトをテンプレートに接続するためのよりクリーンな方法

考え？

4

1 に答える 1

0

そのため、他の誰かが役に立つと思った場合に備えて、自分の質問に答えるのに十分なだけ自分自身を教育することができました. 要するに、私はいくつかのレベルで間違っていたということです。リアクティブコンテキストをより細かくすることが答えです（または少なくとも答えです）。

私が示した例では、#each コンストラクト内にすべてのレンダリングを配置することで、ページ全体をリアクティブにしました。私が今行っているのは、リアクティブ コンテキストをできるだけ小さくして、ページの (比較的) 小さい部分のみがリアクティブな変更で再レンダリングされ、すべてのリアクティブ要素が下 (またはずっと下) に含まれるようにすることです。 jquery ui 要素のレベル。

つまり、次のようなものです。

<body>
{{> mainTemplate}}
</body>

<template name="mainTemplate">

{{#with userInfo}} 

{{> partialNorth}} 
{{> partialWest}}  
  ...

{{/と}}

  {{layItOut}}  
</template>  

<template name="partialNorth">
  <div class="ui-layout-north">  <-- definition for jquery-layout north panel
    <h1>This is the north pane</h1>
    <p>The user data go next:</p><br />
    {{> templateUserData}}
  </div>
</template>

<template name="templateUserData">
  <div>
    {{#with theUserData}}  <-- Assumes a helper function 'theUserData' for this template
      <p>First name: {{first_name}}</p>
      <p>Last name: {{last_name}}</p>
      ...
    {{/with}}
  </div>
</template>

jquery ui 要素の下にリアクティブ要素を配置すると (これまでにパネル、タブ、アコーディオン、ボタン、ポップアップで試しました)、すべてがピカピカのパンフレットで述べたように機能します! ;-)

于 2012-06-13T18:31:47.457 に答える