2

私は Ember Data を使用しておらず、リモート ソースからデータをプルするためにモデルで ajax 呼び出しを行っています。API からデータを正常に受信したら、カテゴリに基づいて並べ替え/フィルター処理したいと考えています。私の計画は、モデルからデータを取得したら、コントローラーを介してフィルター処理されたデータの状態を管理できるようにすることです。

私の問題は、モデル内のデータのフェッチが非同期であるため、コントローラーでメソッドを正確に呼び出して、テンプレートに表示されるデータをフィルター/ソートできないことです。

以下と私の jsfiddle内の私のコードの関連部分。テンプレートの反復処理でissue_listは、情報を簡単に表示できます。ただし、配列を反復処理したいのですが、配列が実際categorized_issuesにいつ設定されるかわからないため、IssuesControllerのメソッドを呼び出すことができます。issue_listcategorize

// 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: -------------------------------
4

1 に答える 1

5

簡単な解決策は、observer として宣言すること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);
            }
        });
    }
});
于 2013-04-01T19:30:02.007 に答える