7

我有一个使用 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。”

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

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

4

3 回答 3

4

这就是我创建的方式：

一个实现，您在中间有主视图，在这种情况下为 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在顶部或底部扩展和插入更多视图。因为topViewandbottomView是Ember.ContainerViews，所有添加的视图都将具有绑定、事件和其他 ember 特性。

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

于 2013-08-15T22:39:50.033 回答
0

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

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 并使用它做任何您想做的事情

于 2013-08-15T19:31:51.707 回答
0

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

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

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

于 2015-01-27T17:56:29.660 回答