13

新しいルーターのアプローチでコンセントを接続する方法がわかりません。

index.html：

...
<script type="text/x-handlebars" data-template-name="application">
  <h4>The application handelbar</h4>
  {{! outlet 1}}
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  <h4>The index handelbar</h4>
  {{! outlet 2 and 3}}
  {{outlet nav}}
  {{outlet main}}
</script>

<script type="text/x-handlebars" data-template-name="main">
  <h4>The main handelbar</h4>
</script>

<script type="text/x-handlebars" data-template-name="nav">
  <h4>The nav handelbar</h4>
</script>
...

app.js：

...
App.Router.map(function(match) {
  this.resource("index", { path: "/" });
  this.route("test");
});

App.IndexController = Ember.Controller.extend({
});

App.IndexView = Ember.View.extend({
  templateName: 'index'
});
...

このコードはoutlet-1をレンダリングします。

質問：

  • アウトレット1がレンダリングされるのはなぜですか？アウトレット1と「インデックス」はどのように接続されていますか？
  • アウトレット2と3を同じ「インデックス」サイトに接続するにはどうすればよいですか？

ありがとう
miw

4

2 に答える 2

15

このようなものは、renderTemplateメソッド（ビルドによってはrenderTemplatesメソッド）を使用して、ルートハンドラーで指定する必要があります。

表示されていないのは、Emberがすでにかなりの数のデフォルトを設定していることです。実際、Emberによって設定されたデフォルトでは、ルートハンドラー全体を省略できます。

App.Router.map(function(match) {
  this.resource("index", { path: "/" });
  this.route("test");
});
App.IndexRoute = Ember.Route.extend({
  renderTemplate: function() {
     this.render(); 
     /* this is the default, it will basically render the
        default template, in this case 'index', into the 
        application template, into the main outlet (i.e. your 
        outlet 1), and set the controller to be IndexController.
     */

  }
});

必要なのは、renderTemplate関数で次のように追加のテンプレートをレンダリングすることです。

  renderTemplate: function() {
     this.render("index"); 
     // this renders the index template into the primary unnamed outlet. 
     this.render("navtemplate", {outlet: "nav"}); 
     // this renders the navtemplate into the outlet named 'nav'.
     this.render("main", {outlet: "main"});
     // this renders the main template into the outlet named 'main'.
  }

お役に立てれば。

于 2013-01-16T23:26:18.620 に答える
6

Emberは、IndexRoute、IndexController、およびIndexViewと自動的に想定/一致します。これは残り火ルーティングガイドにあります

ネストされたルートを接続するには、次のようにします。

App.OtherRoute = Ember.Route.extend({
  renderTemplate: function() {
     this.render('otherTemplate', {
      into: 'index',
      outlet: 'nav'
     }); 
  }
});

これは別の質問からのより詳細な回答です。

于 2013-01-17T02:25:12.170 に答える