Ember.js v0.9.7

by rlivsey

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.7.js"></script>
<script type="text/x-handlebars">
    <div>
        <p>Click one of these:</p>
        {{#each App.images}}
            {{view App.ImageView contentBinding="this" maxWidth=100 maxHeight=100}}
        {{/each}}
    </div>
    
    <p>To set this:</p>
    
   {{view App.ImageView contentBinding="App.images.currentImage"}}
</script>

JavaScript

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

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

App.images = Ember.ArrayController.create({
    content: [
        App.Image.create({url: "http://farm8.staticflickr.com/7226/7095238893_5000f6e57d_n_d.jpg", width: 320, height: 213}),
        App.Image.create({url: "http://farm7.staticflickr.com/6165/6187483789_2956dfc934_d.jpg", width: 335, height: 500})
    ],
    
    currentImage: null,
    
    init: function() {
        this.set("currentImage", this.getPath("content.firstObject"));
    }
})

App.ImageView = Ember.View.extend({
    
    tagName: "img",
    attributeBindings: ["src:src", "width:width", "height:height"],
    
    srcBinding: "content.url",
    
    didInsertElement: function() {
        var img = this.$();
        img.load(function(){
            img.show();
        });
    },
    
    srcAboutToChange: function() {
        this.$().hide();
    }.observesBefore("content"),
    
    click: function() {
        App.get("images").set("currentImage", this.get("content"));
    },
    
    width: function() {
      return this.get("maxHeight") || this.getPath("content.width");
    }.property("content").cacheable(),

    height: function() {
      return this.get("maxHeight") || this.getPath("content.height");
    }.property("content").cacheable(),    
})