Ember.js 0.9.3 template
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.Draggable}}Drag me{{/view}}
</script>
JavaScript
App = Ember.Application.create();
// Put jQuery UI inside its own namespace
//JQ = {};
// Namespaces in Ember should be created with Ember.Namespace.create()
JQ = Ember.Namespace.create();
// 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'),
...