JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.min.js"></script>
<script type="text/x-handlebars">
    Users ({{App.users.length}}):<br/>
    {{#each App.users.sorted}}
      {{#view App.view userBinding="this"}}
        {{user.name}}<br/>
      {{/view}}
    {{/each}}
</script>

JavaScript

App = Ember.Application.create();

App.view = Ember.View.extend({
    click: function (){
        App.users.removeObject(this.get('user'));
    }
});

App.user = Ember.Object.extend({
    name: null
});

App.users = Ember.ArrayProxy.create({ 
    content: [],
    
    sorted: function() {
        var users = this.get('content');
        var sortedUsers = users.slice(0).sort(function(a, b) {
            a = a.get('name');
            b = b.get('name');
            return a > b ? 1 : a < b ? -1 : 0;
        });
        
        return sortedUsers;
    }.property('@each').cacheable()
                                    
});

var names = ["Bob", "Steve", "Joe", "John", "Gary", "Justin", "Peter"];

for(var i = 0; i < 7; i++) {
    var name = names[i];
    var user = App.user.create({name: name});
    App.users.pushObject(user);
}