Latest Ember.js

by mavilein

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.js"></script>
<script type="text/x-handlebars" data-template-name="items" >
    {{#each item in controller itemViewClass="App.ItemView"}}
        {{item.description}} <button {{action toggleDetail}}>{{view.toggleDetailText}}</button>
        {{#if view.showDetail}}
            <img {{bindAttr src="item.img"}}>
        {{/if}}        
    {{/each}}
</script>

JavaScript

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

App.ItemsView = Ember.View.extend({
    templateName: 'items'
});

App.ItemView = Ember.View.extend({
    toggleDetailText: function() {
        return this.get('showDetail') ? 'hide' : 'show';
    }.property('showDetail'),
    toggleDetail: function() {
        this.toggleProperty('showDetail');
    }
});

App.itemsController = Ember.ArrayController.create({
    content: [{
        description: 'first item',
        img: 'http://25.media.tumblr.com/tumblr_ll3y1pZDVJ1qb08qmo1_250.jpg'
    }, {
        description: 'second item',
        img: 'http://24.media.tumblr.com/tumblr_lk7u170Ztt1qb33vho1_250.jpg'
    }, {
        description: 'third item',
        img: 'http://25.media.tumblr.com/tumblr_lj5367UKg11qzgqodo1_250.jpg'
    }]
});

App.ItemsView.create({
    controllerBinding: 'App.itemsController'
}).append();