Is there a change of view intercept (like didInsertElement, for example)?

Using the didInsertElement hook, I can do some initialization of the jQuery plugin, which is necessary. However, if the property changes, Ember re-displays the view, but does not call didInsertElement again. Presumably this is because the element is already on the DOM, and only some parts have changed.

My question is, is there a way that I can override, or in some other way, access what was passed to the DOM using Ember.View AFTER actually inserted into the DOM?

I tried using afterRender but that did not work.

+7
Mar 01 '12 at 4:30
source share
5 answers

I came up with a somewhat unusual way to solve this problem. You can create a helper helper that fires an event when part of a view is re-displayed. I used Bootstrap and jqPlot and should have been able to say, say when the div was available to draw the chart. With my assistant you can do this:

 {{#if dataIsLoaded}} {{trigger didRenderChartDiv}} <div id="chartHost"></div> {{/if}} 
+2
Dec 13 '12 at 10:57
source share

You can also connect to an array of childViews and watch for changes.

Something like this works, but I don't think this is a good performance practice.

 childViewsArrayDidChange: function() { console.log("childViews-Array did change"); }.observes('childViews.@each') 
+1
Nov 20
source share

Not sure if the question remains valid since it has been a while. but there was no answer. I had a similar problem when I want to show a form based on a controller property. After displaying the form, I would like to run some javascript to bind event handlers.

Javascript, however, did not bind event handlers properly, as elements were not displayed when didInsertElement .

My solution is as follows:

Controller and view

 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 } }); 

And pattern

  <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> 

The view binds a property of the controller. As soon as this property changes, the isVisible function starts and reverses the view. Forcing didInsertElement to re-run and binding the JS code to the DOM elements that are now available.

Hope this helps.

+1
Jun 14 '14 at 11:55
source share

Sorry, some moderators [...] deleted my original answer, although it was supported ... shm

Original answer: Take a look at this article by Yehuda Katz http://yehudakatz.com/2011/06/11/using-sproutcore-2-0-with-jquery-ui/ . This is old, and some of the code needs to be modified to work with the current api stream, but this is a good example of how to integrate external frameworks and plugins with Ember.

0
Mar 06 2018-12-12T00:
source share

I fixed the same problem like this:

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

EDIT . Since this is an old answer, it may be deprecated in the current version of EmberJS

0
Apr 17 '12 at 11:24
source share



All Articles