In an Ember view, what is the best way to run the code after re-viewing the internal child view?

Question

I have found many questions on how to initialize jQuery plugins with dynamic data, etc., and usually the answer is that you should use hook didInsertElement . My problem is that when using ember data, the view is initially entered empty, and the template vars are subsequently filled through the bindings. So in didInsertElement I need the elements that I need.

I found a solution that works for me, but I think there should be a better solution.

In addition to the didInsertElement method didInsertElement I also observe the attributes in the controller and call my code from there too, wrapped in Ember.run.next , so that the child view is displayed earlier.

Is there a better solution for responding to updated child views?

Answer 1

It depends a little on the size of your application and the number of elements displayed by your view.

Edit: You can successfully observe the isLoaded property in RecordArray. Some details here: https://github.com/emberjs/data/blob/master/packages/ember-data/lib/system/record_arrays/adapter_populated_record_array.js#L21

One of the options I used for presentations with a single object as their content looks something like this:

 MyApp.CustomView = Ember.View.extend({ content: null, contentObserver: function() { this.rerender(); }.observes('content') } 

If the contents of your view is a list, it makes no sense to re-display the view for each item in the list.

However, I think this approach is pretty similar to what you are already doing.

Another approach is to implement your own adapter using Ember Data. This way, you can tell the rest of your application that it has finished loading your data. Something like:

 MyApp.Adapter = DS.Adapter.create({ //Finding all object of a certain type. Fetching from the server findAll: function(store, type, ids) { var url = type.url; jQuery.getJSON(url, function(data) { store.loadMany(type, data); }); //Perform some custom logic here... } } 

This should work, but it is not, as usual, should be.

In addition, you can take a look at this commit, which allows you to register a one-time event.

https://github.com/emberjs/ember.js/commit/1809e65012b93c0a530bfcb95eec22d972069745#L0R19

Answer 2

I had this problem and came up with a solution: create a helper helper that tells you when this section was rendering. Hope this helps other people!