如何传递视图对象以在子视图中呈现?
问题描述:
我想用它自己的模板和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
应该是得到渲染这个弹出里面灰烬的意见和这些意见将根据看法是什么父母是不同的创建并显示弹出窗口。
弹出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')})
})
}));
将视图传递到弹出视图的正确方法是什么?
注:这似乎是工作,但它会产生一个废弃的错误消息:
Something you did caused a view to re-render after it rendered but before it was inserted into the DOM.
UPDATE:原来,我的问题是由于完全是另一回事(是意外包括Ember.js两次)。上面的代码似乎工作得很好。
答
使用Ember.ContainerView,并使每个内部视图都是各自的视图类,并拥有自己的模板。然后,您可以将包含视图的childViews数组设置为包含要显示的任何视图的实例。