如何以编程方式将子视图添加到特定 DOM 选择器的 Ember 视图？

Question

我有一个视图，它使用 3rd 方库在 didInsertElement 挂钩中呈现额外的 DOM 元素。添加这些新元素后，我需要在其中添加一些子视图，以便它们可以渲染动态数据。

这是我尝试过的：

App.MyView = Ember.View.extend({
  didInsertElement: function() {
    create3rdPartyDomElements();
    var element = this.$('someSelector');
    childView = this.createChildView(App.SomeViewClass, attributesDict);
    childView.appendTo(element);
  }
});

(jsbin:http://jsbin.com/idoyic/3)

这会按预期呈现我的视图，但在 Ember RC 7 中会出现以下断言错误：“您不能附加到现有的 Ember.View。请考虑改用 Ember.ContainerView。”

按照here 的建议，我已尝试扩展 ContainerView，这可行，但我无法在特定的 DOM 选择器处插入子视图。它只是在父视图的开头插入子视图。

有人可以帮帮我吗？非常感谢！

Answer 1

这就是我的创作方式：

一个实现，其中您有主视图，在这种情况下，codemirror，在中间。并且可以在顶部或底部添加更多视图。

App.EditorView = Ember.View.extend({
  templateName: 'editor-view',
  topView: Ember.ContainerView.extend(),
  bottomView: Ember.ContainerView.extend(),
  CodeMirrorView: Ember.TextArea.extend({  
    didInsertElement: function() {      
      this.codeMirror = CodeMirror.fromTextArea(this.get('element'));                  
    }
  })
});

模板：

<script type="text/x-handlebars" data-template-name="editor-view">
  {{view view.topView viewName="topViewInstance"}}
  {{view view.CodeMirrorView}}
  {{view view.bottomView viewName="bottomViewInstance"}}
</script>

表示自定义组件的视图：

App.MyComponent = Ember.View.extend({
  templateName: 'click-here',
  message: null,
  click: function() {
    alert(this.get('message'));
  }
});

实现：

App.MyEditorView = App.EditorView.extend({  
  didInsertElement: function() {
    this._super();
    this.get('topViewInstance').pushObject(App.MyComponent.create({ message: "Hello" }));

    this.get('bottomViewInstance').pushObject(App.MyComponent.create({ message: "World" }));
  }
});

这样可以创建一个新实例，或扩展App.EditorView 并在顶部或底部插入更多视图。因为 topView 和 bottomView 是 Ember.ContainerViews，所以添加的所有视图都将具有绑定、事件和其他 ember 功能。

查看该 jsbin 以查看它是否正常工作 http://jsbin.com/ucanam/686/edit

Answer 2

您可以将子视图渲染到父视图的隐藏 div 中，然后将它们分离并附加到 didInsertElement 钩子中的任意 DOM 元素。

http://jsbin.com/qaqome/1/

有关相关问题（组件而不是视图），另请参阅 this question。

Answer 3

尝试在您的视图中添加一个属性，如下所示：

App.MyView = Ember.View.extend({
  childViewsContainer: Em.ContainerView.create({}),
  didInsertElement: function() {
    create3rdPartyDomElements();
    var element = this.$('someSelector');
    childViewsContainer.createChildView(App.SomeViewClass, attributesDict);
    childView.appendTo(element);
  }
});

然后，您可以访问您的 childViewsContainer 并使用它做任何您想做的事情