6

モーダルをレンダリングしようとしています。そのために、{{outlet modalOutlet}}My application template を使用してカスタム アウトレットを作成しました。これには、デフォルト アウトレットと modalOutlet の 2 つのアウトレットがあります。ただし、モーダル テンプレートが にレンダリングされる{{outlet modalOutlet}}と、私のデフォルト{{outlet}}は空になります。

デフォルトの {{outlet}} が変更されないように変更するにはどうすればよいですか。実際に{{outlet modalOutlet}}モーダル ウィンドウとして、またはレイアウトの一部としてサイドバーとしてレンダリングできます。

これが私のコードによるものなのか、それともrenderTemplate()私が見逃しているメソッドに関するものなのかはわかりません。私のコードのjsFiddle は hereです。

// Router
App.Router.map(function(){
    this.route('contributors');
    this.route('contributor', {path: '/contributors/:contributor_id'});
});


App.ContributorsRoute = Ember.Route.extend({
    model: function() {
        return App.Contributor.all();
    },
});

App.ContributorRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('contributor', {
            outlet: 'modalOutlet'
        });
    }
});

<script type="text/x-handlebars" data-template-name="application">  
    <nav>
        {{#linkTo "index"}}Home{{/linkTo}}
        {{#linkTo "contributors"}}Contributors{{/linkTo}}
    </nav>
    <div style='padding:5px;margin:5px;border:1px dotted red;'>
        Default Outlet
        {{outlet}}
    </div>
    <div style='padding:5px;margin:5px;border:1px dotted blue;'>    
        modalOutlet
        {{outlet modalOutlet}}
    </div>
</script>
4

2 に答える 2

3

問題は、ルーティング構造がネストされていないことです。ルートをネストしたら、モーダル アウトレットを含むルートを指定する必要があります。

何が起こっているかはあなたがレンダリングすることです

アプリケーション -> 寄稿者

リストを表示しますが、リンクをクリックするとレンダリングされます

アプリケーション -> 寄稿者

Contributorテンプレートが削除されます 。

次のように、ルートをネストする場合:

アプリケーション -> コントリビューター -> コントリビューター

その後Contributors、リストを表示するテンプレートが引き続き表示されます。

更新されたJSFiddle

//Router
App.Router.map(function(){
    this.resource('contributors', function() {
        this.resource('contributor', {path: '/:contributor_id'});
    });   
});

//Route
App.ContributorRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('contributor', {
            into: 'application',
            outlet: 'modalOutlet'
        });
    }
});
于 2013-04-12T13:57:19.887 に答える