私は相対的な Ember の初心者なので、ここで明らかな何かが欠けている可能性があります。Bootstrap アコーディオンのカスタム ビューを作成しようとしています。これには相対ビューを使用していますが、それが機能している間、少し単純化できるかどうかを理解したいと思います。href
具体的には、埋め込みの計算されたプロパティを埋め込みの依存toggleView
関係にすることが可能かどうかを知りたいです。コレクションであるトップレベルのビューは次のとおりです。elementId
bodyView.
App.AccordionView = Em.CollectionView.extend({
headingTemplateName: 'accordion-heading',
innerTemplateName: 'accordion-inner',
tagName: 'div',
classNames: ['accordion'],
contentBinding: 'controller.content',
accordion-group
item ビューはcss クラスを持つ DOM 要素に対応します。
itemViewClass: Em.View.extend({
tagName: 'div',
classNames: ['accordion-group'],
target: null,
template: Em.Handlebars.compile("{{view view.headingView contentBinding='view.content'}}{{view view.bodyView viewName='bodyViewInstance' contentBinding='view.content'}}"),
headingView: Em.View.extend({
tagName: 'div',
template: Em.Handlebars.compile("{{view view.toggleView contentBinding='view.content'}}"),
classNames: ['accordion-heading'],
toggleView: Em.View.extend({
tagName: 'div', // Can be an 'a'
templateNameBinding: 'parentView.parentView.parentView.headingTemplateName',
classNames: ['accordion-toggle'],
attributeBindings: ['dataToggle:data-toggle', 'dataParent:data-parent', 'href'],
dataToggle: 'collapse',
dataParent: function() {
return this.get('parentView.parentView.parentView.elementId');
}.property(),
項目ビューhref
のフィールドに依存するプロパティを作成したことに注意してください。target
href: function() {
return "#" + this.get('parentView.parentView.target');
}.property('parentView.parentView.target')
})
}),
bodyView: Em.View.extend({
tagName: 'div',
template: Em.Handlebars.compile("{{view view.innerView contentBinding='view.content'}}"),
classNames: ['accordion-body', 'collapse'],
このフィールドは、bodyView
埋め込みビュー インスタンスが DOM に挿入されるときに設定されます。
didInsertElement: function() {
this.get('parentView').set('target', this.get('elementId'));
},
innerView: Em.View.extend({
tagName: 'div',
classNames: ['accordion-inner'],
templateNameBinding: "parentView.parentView.parentView.innerTemplateName"
})
})
})
});
それはすべてうまくいきます。ただし、次のようなことをしたいと思いますtoggleView
。
href: function() {
return "#" + this.get('parentView.parentView.bodyViewInstance.elementId');
}.property('parentView.parentView.bodyViewInstance.elementId')
実行すると、次のエラーが表示されますが、その理由がよくわかりません。
Error: Something you did caused a view to re-render after it rendered but before it was inserted into the DOM.
私がやりたいことを達成する方法はありますか?