Ember.js - Managing Asynchronous Events and Callbacks

Question

I do not use Ember Data and cannot use the ajax call in my model to retrieve data from a remote source. After I successfully received the data from the API, I want to sort / filter it by category. My plan is that as soon as I get the data from the Model, I can control the filtered state of the data through the controller.

My problem is that since the selection of data in the model is asynchronous, I can’t exactly call the method in my controller to filter / sort the data that will be displayed in the template.

Relevant snippets of my code below and in my jsfiddle . In my template repeating above issue_list , I can easily display the information. However, I would like to iterate over the categorized_issues Array ... and I don't know when the issue_list really set up, so I can call the categorize method on the ControlController.

 // Default Route for /issues App.IssuesIndexRoute = Ember.Route.extend({ setupController: function() { var issues = App.Issue.all(25); this.controllerFor('issues').processIssues(issues); } }); // Model App.Issue = Ember.Object.extend({}); App.Issue.reopenClass({ // Fetch all issues from the ajax endpoint. // Won't work on the JS fiddle all: function() { var issues = []; $.ajax({ url: "http://localhost:3000/issues.json", dataType: 'json', }).then(function(response) { response.issues.forEach(function(issue) { issues.addObject(App.Issue.create(issue)); }, this); }); return issues; }, }); // Controller App.IssuesController = Ember.ArrayController.extend({ issue_list: [], categorized_issues : {"open":[], "closed": []}, processIssues: function(issues) { this.set('issue_list', issues); return issues; }, categorize: function() { var self = this; this.issue_list.forEach(function(i) { // Based on the issue open or closed status if (i.status == "open") { self.categorized_issues["open"].addObject(i); } else { self.categorized_issues["closed"].addObject(i); } }); }, }); 

So my plan is:

• Retrieving data from a model
• Reclassify data based on its status (open or closed) in the controller.
• Display this new data in the template.

It seems I can achieve this. Any ideas on how to do this?

 DEBUG: ------------------------------- DEBUG: Ember.VERSION : 1.0.0-rc.2 DEBUG: Handlebars.VERSION : 1.0.0-rc.3 DEBUG: jQuery.VERSION : 1.9.1 DEBUG: ------------------------------- 

Answer 1

An easy solution would be to declare categorize() as an observer :

 App.IssuesController = Ember.ArrayController.extend({ issue_list: [], categorized_issues : {"open":[], "closed": []}, processIssues: function(issues) { this.set('issue_list', issues); return issues; }, categorize: function() { var self = this; // clear the arrays to avoid redundant objects in the arrays self.get("categorized_issues.open").clear(); self.get("categorized_issues.closed").clear(); this.issue_list.forEach(function(i) { // Based on the issue open or closed status if (i.status == "open") { self.get("categorized_issues.open").addObject(i); } else { self.get("categorized_issues.closed").addObject(i); } }); }.observes(" issue_list.@each "), }); 

This would mean that the observer would fire every time the array changes. In most cases, this will not be a performance issue. To ensure that categorize only starts once , it would be even better if you use Ember.run.once :

 App.IssuesController = Ember.ArrayController.extend({ issue_list: [], categorized_issues : {"open":[], "closed": []}, processIssues: function(issues) { this.set('issue_list', issues); return issues; }, issueListObserver : function(){ Ember.run.once(this, this.categorize); }.observes(' issue_list.@each '), categorize: function() { var self = this; // clear the arrays to avoid redundant objects in the arrays self.get("categorized_issues.open").clear(); self.get("categorized_issues.closed").clear(); this.issue_list.forEach(function(i) { // Based on the issue open or closed status if (i.status == "open") { self.get("categorized_issues.open").addObject(i); } else { self.get("categorized_issues.closed").addObject(i); } }); } });