Simple starting point for Ember.js fiddles

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.1.min.js"></script>
<script type="text/x-handlebars" data-template-name="sample">
    <p><button {{action "alert_img"}}>alert image contents</button></p>
</script>

<script type="text/x-handlebars">
    {{#view Ember.View contentBinding="App.myModel"}}
            {{#view App.PreviewUploadImage name="logo_image" contentBinding="content"}}
                {{view fileField}}
                {{view previewImageView width="200" height="100" srcBinding="content.myModel_src"}}
            {{/view}}
    {{/view}}
</script>

JavaScript

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

App.myModel = Ember.Object.create({
    myModel_src: '',
});

App.PreviewUploadImage = Ember.View.extend({
    fileField: Ember.TextField.extend({
        type: 'file',
        attributeBindings: ['name'],
        change: function(evt) {
            var input = evt.target;
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                var that = this;
                reader.onload = function(e) {
                    //that.$().parent(':eq(0)').children('img:eq(0)').attr('src', e.target.result);
                    var view = that.getPath('parentView.previewImageView');
                    view.printme();
                    view.set('src', e.target.result);
/* since there is a two-way binding with the img src
                    and the model, an update to one should be reflected
                    in the other.  However, this doesn't seem to be the case
My guess is because I am not using the ember.js wrapper functions to update
                    the src attribute.
                    */
                    console.log("Model src [" + App.myModel.get('myModel_src') + "]");

                    //App.myModel.set('myModel_src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        },
        printme: function() {
            console.log("In FilField view\n");
        },
    }),

    previewImageView: Ember.View.extend({
        attributeBindings: ['name', 'width', 'height', 'src'],
        tagName: 'img',
        viewName: 'previewImageView',
        printme: function() {
            console.log('in previewImageView');
        },
    }),
});


App.NotAForm = Ember.View.extend({
    templateName: 'sample',
    tagName: 'span',
    alert_img: function(event) {
        event.preventDefault();
        alert(App.myModel.get('myModel_src'));
    },
});

aView = App.NotAForm.create();
aView.appendTo('body');