Asynchronous loading of partial view in Ember - ajax

Question

I've created an Ember helper to allow for loading a dynamically generated partial view from a URL on the server. It looks like this:
Ember.Handlebars.helper('serverPartial', function(url, options) {
var template;
$.ajax(url, {
async: false,
success: function(templateText){
template = Ember.Handlebars.compile(templateText);
}
});
template(this, options);
});
And it's called from a parent Handlebars template like this:
{{serverPartial templateUrl}}
As you can see, the ajax call to retrieve the template from the server is a synchronous call, because I couldn't find any other way to return the template contents as expected by the Ember framework. Unfortunately, this synchronous call holds up the rendering of the entire parent template.
Is there a way to return a promise for the template, or any other way to allow partial views to load asynchronously or independently?

Answer 1

Thanks for the tip, #Rajat. I did end up using Views to accomplish this. I created a view container that initially loads a default child template, then that child loads in the actual contents from the server after it is inserted. Here's the approach I took:
App.LoadingView = Ember.View.extend({
didInsertElement: function(){
var container = this._parentView;
$.get('http://server/serverTemplate', function(data){
container.pushObject(Ember.View.create({
template: Ember.Handlebars.compile(data)
}));
container.removeObject(container.get('loadingView'));
});
},
template: Ember.Handlebars.compile('client awesome')
});
// inherit from ContainerView and initialize with default content
App.SnippetView = Ember.ContainerView.extend({
childViews: ['loadingView'],
loadingView: App.LoadingView.create()
});
I'm sure there are better ways to express this, but does the job at a minimum.

Answer 2

First, what you are trying to do with Handlebars helpers is not what they are intended to do. Handlebars helpers are strictly markup formatters and should be used for simple HTML adjustments.
Second, in typical ember apps, what you are trying to do is never done. There is no 'on-demand' fetching of templates.
This is because all templates are downloaded in one sweep when the app loads and live on client. They are precompiled to JavaScript functions and stored as Strings in the Ember.Handlebars hash.
They are downloaded when the app loads and then get evaluated when the view is rendered. In the meantime, they live simply as Strings.
Now if you still want to do what you are doing, I would recommend trying to do that in Views.