Load data from server after event on front end - ember.js

Question

At the moment, I try to connect my ember.js application with my webserver. The web application has a datepicker. After a date was selected I like my model to "reload". With reload I mean asking my webserver for the new data containing the specific date.
Below you see my route contacting the server for the required information.
App.PicturesRoute = Ember.Route.extend({
model: function(params) {
return $.getJSON('http://api.<server>.com/pictures?date=' + params.date).then(function(data) {
return data.pictures.map(function(picture) {
picture.body = picture.content;
return event;
});
});
}
});
In the case that I write the date manually in the string everything works fine and I receive data. Now, I have the problem that I don't figure out how to do it dynamically. How should I create the best connection between UI and model. Of course I can implement an action in my controller but how should this controller call/reload the model?

Answer 1

Since the date is part of your URL you should just use transitionTo or transitionToRoute. You probably have a route set up that allows you to match URLs that look something like /pictures/2013-10-09. Things get a little funky since 2013-10-09 isn't really an object id. Usually with transitionToRoute Ember expects that you'll pass in a live model that represents the content you're transitioning to. This would be the same object that Ember would look up by executing the model hook if the route is hit directly (without link-to or transitionTo). Since the date is really a query param and not an id you can use the setupController method to get around the funkiness.
So, your route might look something like this (this is simplified, you'll want to use the appropriate AJAX calls, of course) :
App.PicturesRoute = Ember.Route.extend({
model : function(params){
console.log('calling model for PicturesRoute');
return { date : params.date }; // return a fake model
},
setupController : function(controller, model){
// Make sure not to call super since we don't want to set
// a single object instead of an array
// this._super(controller,model); <-- do not use!
console.log('calling setupController for PicturesRoute');
// Instead set the `date` property directly
controller.set('date',model.date);
// Then find/build an array and set it as the model
var pictures = [
{name : "Pic 1 - " + model.date},
{name : "Pic 2 - " + model.date}
];
controller.set('model',pictures);
console.log(model);
}
});
Then within the app when you detect a change from the date picker you'd call something like this :
var dateFromPicker = ... // however you get a hold of the date string from the picker
var fakeModel = { date : dateFromPicker };
this.transitionTo('pictures',fakeModel);
Here's a JSBin showing a very simplified version of this idea : http://jsbin.com/ucanam/1396/edit
I hope that makes sense.