Question

使用didInsertElement钩子，我可以做一些需要的jQuery插件初始化。但是，如果属性更改，Ember将重新呈现视图，但不会再次调用didInsertElement。大概这是因为元素已经在DOM上，只有某些部分已经改变。

我的问题是，是否有一种方法可以覆盖，或者通过其他方式来访问实际插入DOM的Ember.View AFTER 已经呈现给DOM的内容？< / p>

我尝试使用afterRender，但它没有用。

Answer 1

我提出了一种解决这个问题的方法。您可以make a handlebars helper在重新渲染视图部分时触发事件。我正在使用Bootstrap和jqPlot，并且需要能够说出div可用于绘制图表的时间。有了我的助手，你可以这样做：

{{#if dataIsLoaded}}
    {{trigger didRenderChartDiv}}
    <div id="chartHost"></div>
{{/if}}

Answer 2

你也可以挂钩到childViews数组并观察它的变化。

这样的事情有效，但我不认为这是一个很好的表演实践。

childViewsArrayDidChange: function() {
  console.log("childViews-Array did change");
}.observes('childViews.@each')

Answer 3

不确定问题是否仍然有效，因为它已经有一段时间了。但没有选择答案。我遇到了一个类似的问题，我想根据控制器属性显示一个表单。一旦表单显示，我想运行一些javascript来绑定事件处理程序。

但是Javascript没有正确绑定事件处理程序，因为触发didInsertElement时元素没有显示。

我的解决方案如下，

控制器＆amp;图

App.FormController = Ember.Controller.extend({ myViewVisible : false, actions : { toggleForm : function(){ this.toggleProperty('myViewVisible'); console.log( this.get('myViewVisible') ); } } }); App.FormView = Ember.View.extend({ isVisible:function(){ this.rerender(); }.property('controller.myViewVisible'), didInsertElement : function(){ // Do JS stuff } });

和模板

<script type="text/x-handlebars" data-template-name="form"> <h2>Form</h2> <button {{action 'toggleForm'}}>Toggle form</button> {{#if myViewVisible}} {{partial "tform"}} {{else}} <p>Click button to show form</p> {{/if}} </script>

视图绑定控制器的属性。一旦该属性发生更改，isVisible函数就会启动并重新呈现视图。导致didInsertElement再次触发并将JS代码绑定到现在可用的DOM元素。

希望这有帮助。

Answer 4

对不起，有些主持人删除了我的原始答案，即使它被赞成... shm

原始答案：看看Yehuda Katz撰写的这篇文章http://yehudakatz.com/2011/06/11/using-sproutcore-2-0-with-jquery-ui/。这是旧的，一些代码需要修改才能使用Ember当前的api，但它是如何将外部框架和插件与Ember集成的一个很好的例子。

Answer 5

我解决了同样的问题：

Ember.run.sync(); //force applying bindings
//run after 100ms your code
Ember.run.later(function () {
  //your code
}, 100);

编辑：由于这是一个陈旧的答案，它可能在当前的EmberJS版本中已经过时

是否有后视图更改挂钩（很像didInsertElement）？

5 个答案: