some help on Em.Route#send? - ember.js

Question

I am trying to implement router events and using the send function of the router to trigger the events on the router. But couldn't get any documentation on this.
What I am trying to implement is that I am raising an event from controller/view to get the data from the server. And the events asynchronously fetches the data from the server and when the data has been successfully fetched I wanted to initialize the child view of the view from where I called the event i.e. I need to know when the data has been fetched. But I don't think the events on router returns anything such that I can know when the call has been over.
Something like:
View:
Em.View.extend({
click: function(){
var recordsPromise = this.get('controller.target').send('getRecords');
recordsPromise.done(this.initiateProtocol);
},
showChild: false,
initiateProtocol: function(){
//this showChild is used as a condition in the template to show/hide
// the childview. And is being set after the call completed
// successfully
//here childOneView is present some other js file and is fetched using requirejs
require(['childOneView'], $.proxy(function(childOneView){
this.set('childOne', childOneView.extend({
templateName: 'childOne'
});
this.set('showChild', true);
}, this));
}
}
Router
Em.Route.extend({
events: {
getRecords: function(){
//make an ajax call to fetch the records and return the ajax as a
// promise
}
}
});
Template
{{#if view.showChild}}
{{view view.childOne}}
{{/if}}

Answer 1

I think the idiomatic Ember approach would be a bit different. Send the action up to the controller and let it bubble to the route, and then set properties that your view will respond to via bindings:
View
App.RecordsView = Em.View.extend(Ember.ViewTargetActionSupport, {
click: function(){
this.triggerAction({action: 'getRecords'})
}
});
Controller
App.RecordsController = Em.ArrayController.extend({
content: [],
isLoaded: false
});
Template
<!-- records.handlebars -->
{{#if isLoaded}}
render stuff here... perhaps {{#each this}}{{someRecordProperty}}{{/each}}
{{/if}}
Router
App.RecordsRoute = Em.Route.extend({
events: {
getRecords: function(){
var controller = this.controllerFor('records');
$.ajax(...).then(function(data){
Em.run(function(){
controller.setProperties({
content: data.foo,
isLoaded: true
});
});
});
}
}
});