Simple starting point for Ember.js fiddles

by brennan

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.8.1.js"></script>
<script type="text/x-handlebars">
    <a href="#" {{action addNew target="App.controller"}}>Add New</a>
    {{#each App.controller.content}}
        {{view App.view contentBinding="this"}}
    {{/each}}
</script>

CSS

.yay{
    width:100px;
    height:15px;
    background:#f00;
    margin:2px;
    float:left;
}
.yay.active{
    height:100px;
    background:#ff0;
}

JavaScript

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

App.controller = Ember.Object.create({
    content: [0,1,2,3,4],
    addNew: function(){
        this.get('content').pushObject( this.get('content').length );
    }
});
        
        
App.view = Ember.View.extend({
    template: Ember.Handlebars.compile('<b>{{content}}</b>'),
    classNames: ['yay'],
    classNameBindings: ['isActive:active'],
    
    isActive: false,
    
    click: function(e){e.preventDefault();this.toggleProperty('isActive');},
    
    didInsertElement: function(){
        var self = this;
        $(document).on('click', self.bindToDocument); //Doesn't work
     /* $(document).off('click', function(){
            self.set('isActive', false);  //Would work, but wouldn't be able to .off() it.
        }); */
    },
    willDestroyElement: function(){
        var self = this;
        $(document).off('click', self.bindToDocument); //Doesn't Work
    },
    bindToDocument: function(){
        this.set('isActive', false); //Thinks "this" is an html element, not Ember Obj
    }
});