1

独自のテンプレートと CSS を使用して、再利用可能なポップアップ ビューを構築しようとしています。この再利用可能なビューでは、親ビューがポップアップに入れたいコンテンツを含む子ビューを表示できるようにしたいと考えています。

ポップアップのハンドルバー テンプレートは次のようになります。

<div class='popup'>
    <a class='open' href='#' {{action toggleVisible}}>
        {{view button}}
    </a>

    <div class='collapse'>
        <div class='box'>
            <div class='arrow'></div>
            <div class='arrow-border'></div>

            {{view content}}

        </div>
    </div>
</div>

このコンテキストでは、buttonこのcontentポップアップ内でレンダリングされる Ember ビューである必要があり、それらのビューは、どの親ビューが作成してポップアップを表示しているかによって異なります。

ポップアップ View オブジェクトは次のようになります。

var popup = Ember.View.extend({
    button: null,
    content: null,
    templateName: 'popbox',
    visible: false,
    toggleVisible: function() {
        var visible = this.get('visible');
        this.set('visible', !visible);
        if (visible) {
            this.$().find('.box').fadeOut(250);
        } else {
            var pop = this.$().find('.popbox');
            var box = this.$().find('.box');
                box.css({
                    'display': 'block',
                    'top': 10,
                    'left': ((pop.parent().width()/2) -box.width()/2 )
                    });
            }
        }
    }
}));

親ビューからポップアップでレンダリングされるテンプレートを渡す方法がわかりません。今、私はこのようなことをしようとしていますが、うまくいきません。

var sendto = Ember.View.extend({
    templateName: 'sendto',
    popupView: popup.extend({
        button: Ember.View.extend({
            template: Ember.Handlebars.compile('{{model.selectedRecipients.length}} {{model.peopleOrPersonText}}')}),
        content: Ember.View.extend({template: Ember.Handlebars.compile('Test content')})
    })
}));

ビューをポップアップ ビューに渡す正しい方法は何でしょうか?

注: これは機能しているように見えますが、DEPRECATED エラー メッセージが生成されます。

Something you did caused a view to re-render after it rendered but before it was inserted into the DOM.

更新:私の問題は完全に別の原因であることが判明しました (誤って Ember.js を 2 回含めていました)。上記のコードは、実際には問題なく動作するようです。

4

1 に答える 1

0

Ember.ContainerView を使用し、内部ビューをそれぞれ独自のテンプレートを持つ独自のビュー クラスにします。次に、表示するビューのインスタンスを含むように、含まれているビューに childViews 配列を設定するだけです。

于 2012-04-28T20:16:11.923 に答える