2

次のようなルートマップがあるとします。

App.Router.map ->
    @resource 'posts', ->
        @resource 'post', {path: '/:post_id'}

/postsそのため、 routeに投稿のリストと に 1 つの投稿がありposts/2ます。デフォルトでは、テンプレートは親テンプレート ( )postsにレンダリングされますが、これは OK であり、テンプレートは私が望むものではないテンプレートにレンダリングされます。投稿のリストを単一の投稿に置き換えたい。{{outlet}}applicationpost{{outlet}}posts

だから私はそれをレンダリングするために必要なテンプレートを設定するためのそのソリューションを持ってきました{{outlet}}:

App.PostRoute = Em.Route.extend
    renderTemplate: ->
        this.render(into: 'application')

しかし、結果として、投稿のリストと単一の投稿が1つにレンダリングされました{{outlet}}。それぞれの新しいルートを空にすることはでき{{outlet}}ますが、それが既にレンダリングされていると仮定して、Ember が以前のテンプレートを再度レンダリングしないため、ボタンを壊してしまいます。

したがって、質問は{{outlet}}、さまざまなルートに single を使用し、ember のロジックを壊さない方法です。もちろん、ネストされたルートを避けることはできますが、このようなセマンティック リンクが必要な場合は非常に便利ですpost/2/comment/12/edit。

4

2 に答える 2

0

ルートがネストされている場合でも、ネストされたテンプレートとネストされていないテンプレートを処理するために使用したアプローチは、名前付きアウトレットを使用することです。Ember はそれをとても簡単にします。

訪問中のルートに関連するメニューを常に保持するトップレベルのメニューアウトレットがあります。

アプリケーション テンプレートの例:

<div id="nav">
  {{partial "nav"}}
</div>
<div id="menu">
  {{outlet "menu"}}
</div>
<div id="main">
  {{outlet}}
</div>
{{outlet "modal"}}

「メニュー」と「モーダル」という 2 つの名前付きアウトレットがあります。これらは、ネストされていないが、ネストされたルートまたは正確には任意のルートで使用されるコンテンツを保持するために使用されます。どのルートもアクションに応じてモーダルをグローバルな「モーダル」アウトレットにレンダリングでき、同様にどのルートもメニューを「メニュー」アウトレットにレンダリングできます。

私の例では、coffeescript を使用しています。

ルーター:

App.Router.map ->
  @resource "posts", ->
    @route "create"
    @resource "post", {path: ':id'}, ->
      @resource "comments", {path: ':id'}, ->
        @route "create"
      @resource "comment", {path: ':id'}, ->

ネストされていない名前付きアウトレットにメニューをレンダリングするルート:

App.PostsIndexRoute = Em.Route.extend
  renderTemplate: (controller, model)->
    # default render
    @_super arguments...
    # render posts menu into the application menu outlet
    @render "posts.menu",
      outlet: "menu"
      into: "application"

App.CommentsIndexRoute = Em.Route.extend
  renderTemplate: (controller, model)->
    # default render
    @_super arguments...
    # render comments menu into the application menu outlet
    @render "comments.menu",
      outlet: "menu"
      into: "application"

上記のようにデフォルトのネストされたレンダリングを行う必要はありません。「コンテンツ」などの名前付きアウトレットに常にレンダリングするルート タイプを定義することもできます (Ember が使用するため、「メイン」と呼ばないでください)。

App.ContentRoute = Em.Route.extend
  renderTemplate: (controller, model)->
    @render outlet: "content", into: "application"

そして、常にアプリケーションの「コンテンツ」アウトレットにレンダリングする必要があるルートのサブクラスを作成します。

App.PostsIndexRoute = App.ContentRoute.extend()
App.CommentsIndexRoute = App.ContentRoute.extend()

しかし、Mixin を使用して行う方がよいでしょう。そうすれば、任意の懸念事項を任意のルートに簡単に含めることができます (たとえば、認証されたルートの懸念事項)。

App.RenderIntoContent = Em.Mixin.create
  renderTemplate: (controller, model)->
    @render outlet: "content", into: "application"

App.PostsIndexRoute = Em.Route.extend App.RenderIntoContent,
  ...

App.CommentsIndexRoute = Em.Route.extend App.RenderIntoContent,
  ...
于 2014-05-02T02:41:38.213 に答える