4

私は Ember.js を使い始めたばかりですが、有望と思われることの 1 つは、複数のテンプレートを組み合わせて複雑ではあるがモジュール式のレイアウトを生成する複数のアウトレットのアイデアです。

しかし、私はそれを機能させることはできません。数か月前 (2012 年半ば) には、これに関する多くの質問、回答、および例があったようですが、1.0 への行進では、ごく最近 (2012 年 12 月 / 2013 年 1 月) にルーターを「v2」API に書き直しました。ドキュメントは、彼らが説明していることは得意ですが、多くの全体像のコンテキストを省略しており、エンドツーエンドの例を1つも見つけていません.

これが私が読んだものです：

  • ルーティング ガイドの下のすべて(最新ですが、網羅的ではありません)
  • 「アウトレット」テンプレート ヘルパー API リファレンス(これは古くなっている可能性がありますか?私が呼び出しを試みたすべての試みcontroller.connectOutlet()はUncaught TypeError: Object <(generated animals.cats controller):ember170> has no method 'connectOutlet'.
  • Ember.js Router API v2の発表。具体的には、下のカップルのコメント (複数のアウトレットに関する質問と回答)。はい、この要旨は「警告; 時代遅れです; 最新情報については、ルーティングガイドを参照してください」とマークされています。しかし、現在のルーティング ガイドでは、動作が完全には説明されていないようです。ガイドのテンプレートのレンダリングセクションでは、既存のさまざまなアウトレットにレンダリングする方法を示しています (これを機能させることができます) が、追加のアウトレットを接続する方法や追加のテンプレートをインスタンス化する方法がわかりません。

私にとって何がうまくいくのですか：

  • ネストされたルート (ネストされたリソースです。ルートをネストすることはできませんが、ネストされたリソースのルートをカスタマイズできます) を設定し、ルートに従って自動的にインスタンス化されるテンプレートとアウトレットをネストします。

私が達成する方法を理解できなかったこと：

  • テンプレートを手動でインスタンス化し、アウトレットに接続します。これは、複数のアウトレットを使用したい場合、またはアウトレット/テンプレートの関係をルートとは異なる構造にしたい場合に必要と思われます。(以下にその例を示します。基本的に、私がやろうとしているのは、テンプレートを mixin として使用して、他のどこにでも埋め込むことができるようにすることです。)

有望に見えるが私にとって失敗することは

  • ルートのコントローラーをオーバーライドし (を使用してルートを拡張しApp.WhateverRoute = Ember.Route.extend()、独自のsetupControllerメソッドを提供します)、ここで呼び出しcontroller.connectOutletます。これは上記のように失敗します。このメソッドに渡されたコントローラ オブジェクトにはメソッドがありませんconnectOutlet。

例 (ここでは jsFiddle として、または以下では CSS とスクリプトを埋め込み、https リンクから Ember と依存関係を読み込む自己完結型の html ドキュメントとして、ローカル ファイルに保存してブラウザーで開くことができるはずです。試してみたい):

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ember.js Router Example</title>
    <style>
      .outlet {
        border: 1px solid black;
        padding: 5px;
      }
    </style>
  </head>

  <body>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
    <script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>


    <script type="text/x-handlebars" data-template-name="index">
      <p>Root index template. You should not see this because we redirect App.IndexRoute elsewhere.</p>
    </script>

    <script type="text/x-handlebars" data-template-name="about">
      <p>About this demo.</p>
    </script>

    <script type="text/x-handlebars" data-template-name="guide">
      <p>Guide to this demo.</p>
    </script>

   <script type="text/x-handlebars" data-template-name="animals">
      <p>Animals. You have selected:</p>
      <div class='outlet'>{{ outlet }}</div>
    </script>

    <script type="text/x-handlebars" data-template-name="animals/index">
      <!-- you will not see this unless you disable App.AnimalsIndexRoute redirect. -->
      <p>No animal selected.</p>
    </script>

    <script type="text/x-handlebars" data-template-name="animals/cats">
      <p>Cat. I can meow. Like all animals, I
        <span class='outlet'>{{ outlet }}</span>
      </p>
    </script>

    <script type="text/x-handlebars" data-template-name="animals/dogs">
      <p>Dog. I can bark. Like all animals, I
        <span class='outlet'>{{ outlet }}</span>
      </p>
    </script>

    <script type="text/x-handlebars" data-template-name="animal_mixin">
      <p>am alive.</p>
    </script>

    <script type="text/x-handlebars" data-template-name="application">
      <div class="container">
        <p>
          Select contents for my outlet:
          {{#linkTo "index"}}/ (root){{/linkTo}}
          {{#linkTo "about"}}/about{{/linkTo}}
          {{#linkTo "guide"}}/guide{{/linkTo}}
          {{#linkTo "animals"}}/animals{{/linkTo}}
          {{#linkTo "animals.cats"}}/animals/cats{{/linkTo}}
          {{#linkTo "animals.dogs"}}/animals/dogs{{/linkTo}}
        </p>

        <div class='outlet'>
          {{ outlet }}
        </div>
      </div>
    </script>

    <script>
      App = Ember.Application.create();
      App.Router.map(function() {
        this.resource("about");
        this.resource("guide");
        this.resource("animals", function() {
          this.route("cats");
          this.route("dogs");
        })
      });
      App.IndexRoute = Ember.Route.extend({
        redirect: function() {
          this.transitionTo('about');
        }
      });
      App.AnimalsIndexRoute = Ember.Route.extend({
        redirect: function() {
          this.transitionTo('animals.cats');
        }
      });
      App.AnimalsCatsRoute = Ember.Route.extend({
        setupController: function(controller, model) {
          // BUG: this controller object has no connectOutlet method
          // (uncomment to see this yourself)
          // controller.connectOutlet('animal_mixin');
        }
      });
      App.initialize();
    </script>

</html>

基本的に animal_mixin は、mixin として繰り返し使用したいボイラープレートのチャンクであり、そこにコンセントを配置してこのテンプレートに接続することで、好きな場所にドロップします。ネスト構造によって提供される「継承」を使用して実行できるため、この例は不自然であることがわかります。animal_mixin の内容は「animals」テンプレートに直接入れることができ、animals/cats でそれについて言及する必要はありません。動物/犬。すべての動物でそれが必要な場合は問題ありませんが、このスニペットを含めたくない /animals の別のサブルートがあるとしましょう。繰り返しますが、例は不自然ですが、質問と意図が明確であることを願っています。

4

1 に答える 1

7

複数の名前付きアウトレットを使用できます。jsfiddle の例を次に示します: http://jsfiddle.net/W2dE4/6/。

<script type="text/x-handlebars" data-template-name="application">
    {{outlet header}}
    {{outlet body}}
    {{outlet navBar}}
</script>

他のテクニックについては、この回答も参照してください。

events: {
    showModal: function(){
        this.render('modal', {
            into: 'index',
            outlet: 'modalOutlet',
            controller: this.controllerFor('modal')
        }); 
    }
}
于 2013-01-26T01:21:06.967 に答える