Ember.js 0.9.3 template

by reubenposthuma

HTML

<script src="https://raw.github.com/lukemelia/jquery-ui-ember/master/js/libs/jquery-ui-1.9pre.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.7.1.min.js"></script>
  <script type="text/x-handlebars">
      {{view App.Column}}

  </script>

JavaScript

App = Ember.Application.create();
// Put jQuery UI inside its own namespace
JQ = {};

// Create a new mixin for jQuery UI widgets using the Ember
// mixin syntax.
JQ.Widget = Ember.Mixin.create({
    // When Ember creates the view's DOM element, it will call this
    // method.
    didInsertElement: function() {
        // Make jQuery UI options available as Ember properties
        var options = this._gatherOptions();

        // Make sure that jQuery UI events trigger methods on this view.
        this._gatherEvents(options);

        // Create a new instance of the jQuery UI widget based on its `uiType`
        // and the current element.
        var ui = jQuery.ui[this.get('uiType')](options, this.get('element'));

        // Save off the instance of the jQuery UI widget as the `ui` property
        // on this Ember view.
        this.set('ui', ui);
    },

    // When Ember tears down the view's DOM element, it will call
    // this method.
    willDestroyElement: function() {
        var ui = this.get('ui');

        if (ui) {
            // Tear down any observers that were created to make jQuery UI
            // options available as Ember properties.
            var observers = this._observers;
            for (var prop in observers) {
                if (observers.hasOwnProperty(prop)) {
                    this.removeObserver(prop, observers[prop]);
                }
            }
            ui._destroy();
        }
    },

    // Each jQuery UI widget has a series of options that can be configured.
    // For instance, to disable a button, you call
    // `button.options('disabled', true)` in jQuery UI. To make this compatible
    // with Ember bindings, any time the Ember property for a
    // given jQuery UI option changes, we update the jQuery UI widget.
    _gatherOptions: function() {
        var uiOptions = this.get('uiOptions'),
            options = {};

        // The view can specify a list of jQuery UI options that should be treated
      ...