faded picture of luke
a semi-random photo | click for the full photo gallery
click to browse photos
homepage navigation

Luke Melia

Using Ember.js with jQuery UI

Note: This post is a refresh of Yehuda Katz’s post of June 11, 2011, Using SproutCore 2.0 with jQuery UI. Thanks to Yehuda for his review.

Another note: Updated on 8/24/2012 to bring up to date to ember-1.0.pre from 8/3/2012.

No rest for the weary: Updated on 4/14/2013 to bring up to date to ember-1.0.0-rc.2 from 3/29/2013.

N.B. Ember 1.0 has shipped! I updated the repo on 9/20/2013 to move to ember-1.0.0 final from ember-1.0.0-rc.2. I also updated jQuery and jQuery UI to latest stable versions. No code changes were required in the example code or blog post.

One of the goals of Ember.js is to make it trivial to integrate the tools you’re already using.

One way that we do that is to provide hooks to interact with the DOM the way that you have learned to with jQuery.

Quick Refresh: Handlebars Templates

You can take any piece of HTML and attach it to an Ember view. You would typically do this in order to attach event handlers to the view or to define a function that computes how a particular value should be displayed. For instance, let’s say we have some HTML that shows a business card for a person:

<div class="card">
  <p class="name">{{salutation}} {{fullName}}</p>
  <p class="address">{{number}} {{street}}</p>
  <p class="region">{{city}}, {{state}} {{zip}}</p>
</div>

We can wrap this chunk of HTML in an Ember view, which will define the sources of each of the properties used in {{ }}.

<script type="text/x-handlebars">
{{#view App.BusinessCardView}}
  <div class="card">
    <p class="name">{{salutation}} {{fullName}}</p>
    <p class="address">{{streetNumber}} {{street}}</p>
    <p class="region">{{city}}, {{state}} {{zip}}</p>
  </div>
{{/view}}
</script>

Wrapping the HTML snippet in a <script> tag tells Ember to render it using its template engine. Let’s look at the view and controller implementation :

App.BusinessCardView = Ember.View.extend({
  // view will render with it's corresponding controller as the context
});

App.BusinessCardController = Ember.Controller.extend({
  firstName: "Yehuda",
  lastName: "Katz",
  salutation: "Mr.",
  streetNumber: 300,
  street: "Brannan",
  city: "San Francisco",
  state: "CA",
  zip: "94107",
  fullName: function() {
    return this.get('firstName') + ' ' + this.get('lastName');
  }.property('firstName', 'lastName')
});

If we reload the page, we will see a static business card with Yehuda’s information in it. If we were to use the console to update the content by executing App.__container__.lookup('controller:business_card').set(key, value), Ember will automatically update the HTML for you. If you update any property, including firstName or lastName, which are used only as dependencies of fullName, Ember will automatically handle updating the HTML for you.

didInsertElement

You can also define some code to run every time an element is rendered. You can use this hook to wire up any JavaScript library to the element that Ember has created. For instance, let’s say we want to zebra stripe the three lines in our business card once it has been created (note: you probably would not use JS to zebra stripe in real life).

Let’s extend our view:

App.BusinessCardView = Ember.View.extend({  
  didInsertElement: function() {
    this.$("p:even").addClass("even");
  }
});

All Ember views have a $ function, which is the normal jQuery function, scoped to the current element. You can also call this.$() to get back a jQuery object wrapping the element itself.

You can use this hook to do anything you want, allowing you to hook in any library you want. You would use this hook a lot like you’d use a jQuery(document).ready hook, but scoped to the view being created.

Ember also provides a willDestroyElement hook, which you can use to tear things down that you set up when the element was inserted. This is relatively rare, and is mostly used when interfacing with another toolkit that requires a teardown, or to tear down custom Ember observers.

jQuery UI

We can use these hooks to build some basic integration with jQuery UI. Yehuda and Tom Dale wrote a demo (which I’ve adapted for current Ember.js) that shows how to connect Ember bindings to jQuery options at http://lukemelia.github.com/jquery-ui-ember. You can also check out the annotated source code and the GitHub repo.

The most important thing to look at is the JQ.Widget mixin, which can be mixed into view classes to attach jQuery UI options and events to Ember’s binding and event system.

You can get started with Ember.js over at emberjs.com.

Until next time!

LukeMelia.com created 1999. ··· Luke Melia created 1976. ··· Live With Passion!
Luke Melia on software development freelance web development how to contact me Luke Melia, Software Developer letters and more from my travels photo gallery personal philosophy