1

ApplicationView にレイアウトという名前の 1 つのアウトレットと、その中に名前のないアウトレットを持ついくつかのレイアウト クラスを用意することで、Ember.js のレイアウトを動的に切り替えようとしています。この JSfiddle を参照してください: http://jsfiddle.net/ElteHupkes/SFC7R/2/。

これは最初は問題なく動作しますが、レイアウトを切り替えるとコンテンツが消えます。これは、単にアプリケーション ビューを再レンダリングしたときに発生する問題と同じようです ( router.get('applicationView').rerender()) 。

コントローラーのバインディングが同じままであるため、名前のないアウトレットは引き続き接続され、内部ビューのコンテンツがレンダリングされる必要があると言えます。なぜそうでないのか、誰かが私に教えてくれることを願っています:)。

HTML:

<script type="text/x-handlebars" data-template-name="application">
  {{outlet layout}}
  <a href="#" {{action doToggleLayout}}>Toggle layout</a>
</script>

<script type="text/x-handlebars" data-template-name="layout1">
  <h1>Layout 1</h1>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="layout2">
  <h1>Layout 2</h1>
  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
  Page contents.
</script>

JS:

App = Ember.Application.create({
    autoinit: false,
    Router: Ember.Router.extend({
        root: Em.Route.extend({
            index: Em.Route.extend({
                route: '/',
                connectOutlets: function(router) {
                    // Fire toggle once as an initializer
                    router.send('doToggleLayout');

                    router.get('applicationController').connectOutlet('index');
                }
            }),

            doToggleLayout: function(router) {
                this.set('layoutClass', this.get('layoutClass') == App.Layout2View ? App.Layout1View : App.Layout2View);

                router.get('applicationController').connectOutlet({
                    viewClass: this.get('layoutClass'),
                    outletName: 'layout'
                });
            }
        })
    }),

    ApplicationView: Em.View.extend({
        templateName: 'application'
    }),

    ApplicationController: Em.Controller.extend({})
});

App.IndexView = Em.View.extend({
    templateName: 'index'
});
App.Layout1View = Em.View.extend({
    templateName: 'layout1'
});
App.Layout2View = Em.View.extend({
    templateName: 'layout2'
});
App.set('layoutClass', App.Layout2View);
App.initialize();
4

1 に答える 1

2

潜在的なリークの理由として、アウトレットを切り替えると、以前のビュー (およびそのすべてのサブビューが破棄されます) が表示されるため、匿名アウトレットを再接続して埋める必要があると思います。

于 2012-10-24T15:45:43.373 に答える