Ember: How to Cleanly Replace Model Data and Progress Indicators

Question

I have a specific route that shows a list of projects, and it gets the source data from my RESTAdapter based on who the user is.

Now I am implementing a search function that issues a new API call so that the user can receive entries, except for standard ones, for them, and the answer should replace the model for this route. I have everything that works, but I'm not sure how to make a download or progress indicator (since the answer from the database may take 5-10 seconds depending on the amount of data). I know about loading substations, but in this case I do not go between routes. I just want to have at least a counter so that the user knows that he is working on something.

Someone who has done this before will want to share how they process: a) replace the model with new data and b) inform the user using a counter or something else?

Form action that is called when the user clicks the search button

searchProjects: function() { var query = this.get('queryString'); if (query) { var _this = this; var projects = this.store.find('project', {q: query}); projects.then(function(){ _this.set('model', projects); }); } } 

Answer 1

a) replacing the model with new data

You do not have to do anything. If you properly load records from the backend, Ember will automatically update them in the frontend.

b) informing the user with a counter or something

Loading Substance is an energetic transition. Ember also supports lazy transitions through the loading event.

You can use this event to display a counter.

Here is an example from docs :

 App.ApplicationRoute = Ember.Route.extend({ actions: { loading: function(transition, route) { showSpinner(); this.router.one('didTransition', function() { hideSpinner(); }); return true; // Bubble the loading event } } }); 

UPD1

Do I need to do at least what I am doing right? Setting the model to an answer?

You need to flip your search by URL using query parameters . This will allow the router to automatically update the model for you.

what would I add to showSpinner to influence the material on the page (for example, can I use jQuery to show or hide the spinner element?) or show the actual boot subtask.

I would set the property on this page controller:

 App.IndexRoute = Ember.Route.extend({ queryParams: { search: { refreshModel: true } }, model () { return new Ember.RSVP.Promise( resolve => setTimeout(resolve, 1000)); }, actions: { loading (transition, route) { this.controller.set('showSpinner', true); this.router.one('didTransition', () => { this.controller.set('showSpinner', false); }); return true; } } }); App.IndexController = Ember.Controller.extend({ queryParams: ['search'], search: null, showSpinner: false, }); 

Demo: http://emberjs.jsbin.com/poxika/2/edit?html,js,output

Or you can simply put the counter in a download template that will hide obsolete data:

http://emberjs.jsbin.com/poxika/3/edit?html,js,output

Or you can put your counter in the download template:

Answer 2

Just in case, others want to see, here is my working code based on @lolmaus answers.

These Docs pages were also useful. Route queryParams and the Find Method.

controller

 //app/controllers/project.js export default Ember.ArrayController.extend({ queryParams: ['q'], q: null, actions: { searchProjects: function() { var query = this.get('queryString'); if (query) { this.set('q', query); } } } }) 

Route

 export default Ember.Route.extend(AuthenticatedRouteMixin, { model: function(params) { if (params.q) { return this.store.find('project', params); } else { return this.store.findAll('project'); } }, queryParams: { q: { refreshModel: true } }, actions: { loading: function(/*transition, route*/) { var _this = this; this.controllerFor('projects').set('showSearchSpinner', true); this.router.one('didTransition', function() { _this.controllerFor('projects').set('showSearchSpinner', false); }); return true; // Bubble the loading event } } }); 

Now my problem is that when I use a parameter request, it works fine, but if I clear the request (with an action to effectively "return"), the records received by the request remain in the repository, so when it does findAll() , I have both sets of records, which is not at all what I want. How to empty the repository before findAll ?