Simple starting point for Ember.js fiddles

by pangratz666

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.6.js"></script>
<script type="text/x-handlebars" >
    {{#each App.usersController}}
        {{#view App.UserView userBinding="this" controllerBinding="App.usersController"}}            
            {{user.name}}
            {{#if isFollowing}}
                <a {{action "toggleFollowing"}} class="clickable" >stop following</a>
            {{else}}
                <a {{action "toggleFollowing"}} class="clickable" >start following</a>
            {{/if}}
            {{#if user.isSaving}}saving ...{{/if}}    
        {{/view}}
    {{/each}}
</script>

CSS

.clickable {
    cursor: pointer;
}

JavaScript

App = Ember.Application.create({});

App.User = Ember.Object.extend({});

App.usersController = Ember.ArrayProxy.create({
    content: [],

    addUser: function(name, isFollowing) {
        this.pushObject(App.User.create({
            name: name,
            you_follow: isFollowing
        }));
    },

    toggleFollowing: function(user) {
        user.set('isSaving', true);
        Ember.run.later(function() {
            user.toggleProperty('you_follow');
            user.set('isSaving', false);
        }, 1000);
    }
});

App.UserView = Ember.View.extend({
    isFollowingBinding: 'user.you_follow',
    toggleFollowing: function() {
        var user = this.get('user');
        var controller = this.get('controller');
        controller.toggleFollowing(user);
    }
});

App.usersController.addUser('first', true);
App.usersController.addUser('second', false);