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 视图，这些视图将根据正在创建和显示弹出窗口的父视图而有所不同。

弹出视图对象如下所示：

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')})
    })
}));

将视图传递给弹出视图的正确方法是什么？

注意：这似乎有效，但会生成一条已弃用的错误消息：

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

更新：事实证明我的问题完全是由于其他原因（意外地包括了 Ember.js 两次）。上面的代码实际上似乎工作得很好。

4

1 回答 1

0

使用 Ember.ContainerView，并让内部视图各自成为具有自己模板的视图类。然后，您可以在包含视图上设置 childViews 数组以包含您要显示的任何视图的实例。

于 2012-04-28T20:16:11.923 回答