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"}}
        {{content.myModel_variable}}
    {{/view}}
{{/view}}

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.

http://jsfiddle.net/W5QA9/

<script>
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);
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>

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

View Object Binding

See jsfiddle at top of page.

Advertisements

7 thoughts on “Ember.js Handlebars View content Inheritance + Image Upload Preview + View Object Binding

  1. Just wanted to say this was much appreciated. There is so little info out there about ember, and trying to find solutions to some of these common development problems is like an archeology dig. So finding this tutorial which deals with almost exactly what I was trying to achieve is a bit like stumbling onto an ancient Mayan burial chamber of solid gold. Thanks a ton, please forgive my terrible extended metaphor.

  2. I was searching for file upload with emberjs today and ran into this. I want to say thank you for writing this blog post. It really helped.

  3. I’m reaching out because you contributed some of the earliest tutorial/opinion articles for the Ember.js community. Thanks!

    Ember has gone through many changes since you first published and we’ve finally arrived at a stable 1.0 API. This means the code samples in your article are no longer accurate.

    We’d like to help authors update their articles to the 1.0 API and reduce the confusion for new developers approaching Ember.js for the first time. We’re asking that authors place a notice at the top their older articles and have created an image and HTML snippet you can easily drop in:

    Feel free to customize this banner any way you like.

    If you want to update your article to the 1.0 API – totally optional – feel free to contact me with questions or ask for advice.

    Cheers,
    Trek

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s