Ember.js - 管理異步事件和回調

Question

我沒有使用Ember Data，並在我的模型中調用ajax來從遠程源中獲取數據。在我成功接收到API中的數據後，我想根據類別對其進行排序/過濾。我的計劃是，一旦我從模型中獲取數據，就可以通過控制器管理數據的過濾狀態。

我的問題是，因爲提取模型中的數據是異步的，我無法準確地調用我的控制器中的方法來過濾/排序要顯示在模板中的數據。

我的代碼的相關部分，下面和my jsfiddle。在我的模板迭代issue_list我可以很容易地顯示信息。不過，我想遍歷categorized_issues數組...我不知道issue_list數組真的得到設置，所以我可以調用的問題控制器的categorize方法。

// 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); 
      } 
     }); 
    }, 
}); 

所以我的計劃是：

1. 從型號
獲取數據
2. 重新分類基礎上的數據它的狀態（開或關）控制器。
3. 在模板中顯示此新數據。

我似乎可以做到這一點。任何想法如何去做呢？

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

一個簡單的解決辦法是聲明categorize()作爲觀察員：

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"), 
}); 

這意味着觀察者會得到在陣列中的每個變化觸發。在大多數情況下，這可能沒有性能問題。爲了確保categorize只是運行一次，它甚至會更好，如果你使用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); 
      } 
     }); 
    } 
});