ember.js - 如何以编程方式将 subview 添加到特定 DOM 选择器的 Ember View ？

Question

我有一个使用 3rd 方库在 didInsertElement Hook 中呈现其他 DOM 元素的 View 。添加这些新元素后，我需要在其中添加一些 subview ，以便它们可以渲染动态数据。

这是我尝试过的:

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)

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

我已尝试扩展 ContainerView，建议 here这行得通，但我无法在特定的 DOM 选择器中插入 subview 。它只是在父 View 的开头插入 subview 。

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

Answer 1

这就是我创建的方式:

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

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>

表示自定义组件的 View :

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并在顶部或底部插入更多 View 。因为 topView和 bottomView是 Ember.ContainerView s，添加的所有 View 都将具有绑定(bind)、事件和其他 ember 功能。

看看那个 jsbin 看看它是否工作 http://jsbin.com/ucanam/686/edit