ember.js - Ember.js の兄弟属性バインディング

Question

私は相対的な Ember の初心者なので、ここで明らかな何かが欠けている可能性があります。Bootstrap アコーディオンのカスタム ビューを作成しようとしています。これには相対ビューを使用していますが、それが機能している間、少し単純化できるかどうかを理解したいと思います。href具体的には、埋め込みの計算されたプロパティを埋め込みの依存toggleView関係にすることが可能かどうかを知りたいです。コレクションであるトップレベルのビューは次のとおりです。elementIdbodyView.

App.AccordionView = Em.CollectionView.extend({
  headingTemplateName: 'accordion-heading',
  innerTemplateName: 'accordion-inner',
  tagName: 'div',
  classNames: ['accordion'],
  contentBinding: 'controller.content',

accordion-groupitem ビューは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.

私がやりたいことを達成する方法はありますか？