I am trying to get the view of one extension to render inside a div made by another extension but it doesn't work as the extension I want to render it into is rendered second.
At the moment the extensions seem to load in alphabetical order, is there a way to change the order without changing extension names, or is there a way to make the first extension wait for the second extension to finish rendering before it renders.
Hey Gavin,
I'm trying to think of what you're trying to do. Could you explain a bit more about what you're trying to do. The more technical the better. Which extensions etc?
Normally extensions run off events so getting a load order shouldn't matter.
Thanks,
Daryl
Hi Daryl,
I am working with two custom extensions; one for audio playback and one for navigation. I started with the navigation extension which renders it's GUI as a fixed position bar at the bottom of the screen containing a row of buttons. this is rendered in the same way as the trickle button using the following
this.$el.appendTo('body');
both extensions check what kindof stuff is on the page to decide whether they will be set up e.g.
Adapt.on('router:page', function(model) {
var availableBlocks = model.findDescendants('blocks');
//if there are blocks on the page then setup extension
if (availableBlocks.length !== 0) {
setupNavigationView(model);
}
});
Next, while developing the audio extension (which contains an audio element and some buttons), i wanted the playback control buttons to go into the same bar(mainly so that it could inherit the CSS of the bar). I was trying to achieve this by changing the render function from this.$el.appendTo('body'); to this.$el.appendTo('.mediaControls'); (mediaControls is the class of a div inside the $el of the navigation extension) but this didn't work because at the point that the audio extension rendered, the navigation extension hadn't rendered yet, so there was no .mediaControls div to append to.
While thinking it through and reading I realised that even if i did get the audio extension to render into the navigation extension, then the audio element would disappear and need to be reinserted every time the navigation extension rendered.
I ended up making another extension which i have called adapt-1-bottomMenu (I added a '1' to make it load first.) this contains a div for each extension to append its view to and also contains all the top level css that I want the extensions to inherit.
having to put a '1' in the extension name still seems a little odd but I'm probably straying a bit from best practices by having the extensions be so interdependent. It works at the moment so I have moved on but i'd be interested to hear if there is a more sensible way of achieving this.
I found this article which discusses sub-views which could be a solution (navigation view and audio view as subviews of bottomMenu view) but I haven't fully grasped it yet
Hope this all makes sense
Gavin
Hey Gavin,
Thanks for the detailed response. If you know that these two extensions are going to work together then I would have the navigation extension trigger an event once it's rendered. I would suggest using a _.defer() to make sure the render loop has finished.
postRender: function() {
_.defer(function() {
Adapt.trigger('navExtension:postRender');
});
}
Then in your audio extension - listen to this event:
Adapt.on('navExtension:postRender', function() {
new AudioExtensionView();
});
I'm not sure what you've named them but just be careful about triggering events with 'navigation' as this is what the navigation triggers.
Hope this helps and let me know if you need anything else.
Thanks,
Daryl