2013-01-31 6 views
5

デフォルトでは、Emberは子リソースのビューを親リソースのビューで定義された{{outlet}}に挿入します。どのように私はそれを無効にするのですか?すなわち、アプリケーションビューによって定義された{{outlet}}に子ビューを挿入する。なぜこれがデフォルトですか?Ember.js:メインアプリケーションのコンセントに子リソースのビューを挿入する

ユースケース:usersリソースがあり、内部にnewルートがあります。親リソースの{{outlet}}ではなく{{outlet}}のアプリケーションにnewを表示します。我々はオーバーロードすることができrenderTemplate方法を持っている各ルートについては

App.Router.map(function(){ 
    this.resource('users', function(){ 
    this.route('new'); 
    }); 
}); 

答えて

14

。これにより、フルビューのレンダリングが制御されます。

例えば、我々は、ビューがintoでレンダリングされますどの{{outlet}}に指定することができます。

(私はこれはあなたのユースケースであると仮定し、私は少しぼんやり今日です。)

var UsersRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
     this.render('users', { 
      // Render the UsersView into the outlet found in application.hbs 
      into: 'application' 
     }); 
    } 
}); 

またoutletプロパティを使用して描画のために出口から名前を指定することができます。

var UsersRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
     this.render('users', { 
      // Render the UsersView into the outlet named "sidebar" 
      outlet: 'sidebar' 
     }); 
    } 
}); 

もちろん両方のコンビネーションを使用してコンセントの名前と、そのコンセントがintoプロパティを使って見つかった場所を指定することができます。

+0

置き換えるのではなく新しいビューを追加することはできますか?私は、ページ上の他の要素と少し重なり合ってほしいと思っているパネルを持っています。これはbodyタグの中に直接置くことを意味しています(実際にはアプリケーションテンプレートの内側にあります)。初期化時にレンダリングするのではなく、プログラムで注入するのが理想的でしょう。 – commadelimited

+1

私は完全に理解しているかどうかはわかりませんが、おそらく 'Ember.ContainerView'があなたのニーズに合っていますか? http://emberjs.com/api/classes/Ember.ContainerView.html – Wildhoney

+0

いい答えだ。 ContainerViewは私が行ったことであり、うまく動作しています。ありがとうございました。 – commadelimited

関連する問題