Ember.js Handlebars View content Inheritance + Image Upload Preview + View Object Binding

This tutorial includes: (1) inheriting a parent view’s content context in Handlebars, (2) an ajax image upload preview, and (3) object view 2-way binding.

The following fiddle is the full example.  http://jsfiddle.net/MBmUs/63/

Handlebars Content Context

Handlebar provides views the ability to specify a data context for which to interact with.  The working context is effectively a passed in argument for use by the view.  It’s common to have nested views when dealing with Handlebars and Ember.js.  Further, you often want to ‘forward’ the parent context to the nested view.  But how do you do this?  Simple…

{{#view Ember.View contentBinding="App.myModel"}}
    {{#view App.PreviewUploadImage name="logo_image" contentBinding="content"}}

Ajax Upload Preview

Providing the user with a preview of an image they intend to upload is a useful feature.  The programmer can provide the user with feedback such as what the re-sized image will look like, how the image fits into the intended use layout, or just to remind the user what image they chose.  Traditional systems first send the image to a server then re-download the image for display.  More commonly this is made transparent to the user with Ajax technology.  We can however improve upon this processes and display the chosen image to the user without first sending it to a server using the FileReader() object.


function previewImg() {
    var input = $('#file-upload');
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $('#blah').attr('src', e.target.result);
                //App.myModel.set('myModel_src', e.target.result);

<input id="file-upload" onClick="previewImg();" type="file" />
<img src="#" id="blah" />

View Object Binding

See jsfiddle at top of page.