0

私たちのサイトにはページがあります。それを「動物」と呼びましょう。このページは 2 つのセクションに分かれています。左側にメニューがあり、右側のパネルにコンテンツがあります。左側のメニューには 2 つのタブがあります。「猫」と「犬」、それぞれに品種のリストがあります。

したがって、/animals/dogs/beagle に移動すると、「ビーグル」が選択された状態で犬のタブが開き、右側のパネルにビーグルに関する情報が表示されます。

私の問題は、/animals ルートが事実上、右側のパネルと左側のメニュー周辺のいくつかの機能を含む画面全体であるため、テンプレートの物理階層が実際にはルート階層に従っていないことです (非表示にすることができます)。など）。動物のルート (/cats または /dogs) は、左側のメニュー内の {{outlet}} 内にレンダリングされたテンプレートですが、レンダリングしたい品種情報がテンプレートによって「所有」されている領域内に収まらないためです。その上 (左側のメニュー内) あるべき場所に移動する方法がよくわかりません (トップレベルの /animals テンプレート内の 2 番目の {{outlet}} でしょうか?)。

これらの 2 つのセクションが同じテンプレート領域内に収まるように、階層の最下位レベルで画面全体を効果的に再現せずにこれを達成するための最良/正しい方法は何ですか?

ここにいくつかのASCIIアートがあります:)

 ------------------------------------------------------------
| Animals                                                    |
|   ------   ------          ----------------------------    |
|  | Cats | | Dogs |        | All about Persian cats...  |   |
|  |      `------------     |                            |   |
|  | Birman            |    |                            |   |
|  | >Persian<         |    |                            |   |
|  | Siamese           |    |                            |   |
|   -------------------      ----------------------------    |
 ------------------------------------------------------------
4

1 に答える 1

0

あなたが探しているのは、アウトレットという名前です。詳細はこちら: http://emberjs.com/guides/routing/rendering-a-template/

基本的に、動物テンプレートでは、次のようなアウトレットを定義する必要があります。

      <h5>ANIMALS</h5>
      <div>
        <div style="with:40%; float: left;">
          <div style="padding-right:20px;">
            <div>NAVIGATION</div>
            SOME NAVIGATION STUFF
        </div>
        <div style="with:60%; float: left;">
          <div>DETAILS</div>
          <div>{{outlet 'details'}}</div>//THIS IS WHERE YOUR DETAILS STUFF WILL BE RENDERED
        </div>
        <div style="clear:both;"></div>
      </div>

そして、「詳細」という名前のアウトレットで品種固有の詳細をレンダリングします。次のように、それぞれの の「renderTemplate」フックで指定できる場所に何をレンダリングするかを制御する方法:

        App.BreedRoute = Ember.Route.extend({
          .....

          renderTemplate: function() {
            this.render({'into':'animals', 'outlet':'details'});
          }
        });

つまり、「品種」ルートから得られる出力はすべて、「動物」ルートで見つけることができる「詳細」アウトレットにレンダリングする必要があります。

ここにアイデアを与えるためのjsbinがあります：http://emberjs.jsbin.com/bugexa/1/

品種リストをクリックすると、画面の右側のセクションに詳細が表示されます。お役に立てれば。

于 2014-09-30T14:05:23.807 に答える