JSFiddle - React, Tailwind, and code Playground

by rushi

HTML

<script src="http://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.2.js"></script>

JavaScript

window.App = Ember.Application.create();

// Router
App.Router.map(function() {     
    this.resource('issues', { path: '/'}, function() {
        this.route('status', {path: '/status/:status_id'});
    });   
});

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