1

我是一个相对的 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-groupcss 类的 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.

有什么办法可以完成我想做的事情吗？

4

0 回答 0