Ember.js - Managing Asynchronous Events & Callbacks

rltm_9999

New Member
I'm not using Ember Data, and have an ajax call in my Model to pull data from a remote source. After I've successfully received the data from the API, I want to sort/filter it based on category. My plan is that once I get the data from the Model, I can manage the filtered state of the data through the controller.My problem is that because fetching the data in the Model is asynchronous, i can't exactly call a method in my controller to filter/sort the data to be displayed in the template.The relevant pieces of my code, below and in my jsfiddle. In my template iterating over \[code\]issue_list\[/code\] I can easily display the information. However, I would like to iterate over the \[code\]categorized_issues\[/code\] Array ... and I dont know when \[code\]issue_list\[/code\] array really gets set so I can call the \[code\]categorize\[/code\] method of the IssuesController.\[code\]// Default Route for /issuesApp.IssuesIndexRoute = Ember.Route.extend({ setupController: function() { var issues = App.Issue.all(25); this.controllerFor('issues').processIssues(issues); }});// ModelApp.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; },});// ControllerApp.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); } }); },});\[/code\]So my plan is:[*]Fetch Data from Model [*]Re-categorize the data based on it's status (open or closed) in the controller.[*]Display this new data in the template. I can seem to achieve this. Any ideas on how to go about it ?\[code\]DEBUG: ------------------------------- DEBUG: Ember.VERSION : 1.0.0-rc.2DEBUG: Handlebars.VERSION : 1.0.0-rc.3DEBUG: jQuery.VERSION : 1.9.1DEBUG: ------------------------------- \[/code\]
 
Back
Top