Adding JQuery UI options to Ember views

Question

Suppose I would like to modify view within the Ember.js sample todo app to be resizable.

The JQuery code to do this would be:

$("#container").resizable()

where #container represents a div. I am not sure where in the app structure this snippet would belong. Does it go inside of app.js? The contents is listed below and I am not sure which method would be most appropriate to put the above snippet in.

Todos = Ember.Application.create();

Todos.Todo = Ember.Object.extend({
  title: null,
  isDone: false
});

Todos.todosController = Ember.ArrayController.create({
  content: [],

  createTodo: function(title) {
    var todo = Todos.Todo.create({ title: title });
    this.pushObject(todo);
  },

  clearCompletedTodos: function() {
    this.filterProperty('isDone', true).forEach(this.removeObject, this);
  },

  remaining: function() {
    return this.filterProperty('isDone', false).get('length');
  }.property('@each.isDone'),

  isEmpty: function() {
    return this.get('length') === 0;
  }.property('length'),

  allAreDone: function(key, value) {
    if (arguments.length === 2) {
      this.setEach('isDone', value);

      return value;
    } else {
      return !this.get('isEmpty') && this.everyProperty('isDone', true);
    }
  }.property('@each.isDone')
});

Todos.CreateTodoView = Ember.TextField.extend({
  insertNewline: function() {
    var value = this.get('value');

    if (value) {
      Todos.todosController.createTodo(value);
      this.set('value', '');
    }
  }
});

Todos.MainView = Ember.View.extend({
  templateName: 'main_view'
});

Answer 1

Usually when you are dealing with DOM manipulation plugins such as this, I like to add it to the view's didInsertElement method, where this.$() is a jQuery object representing the views element.

Todos.MainView = Ember.View.extend({
  templateName: 'main_view',
  didInsertElement: function(){
    this._super();
    this.$().resizable();
  }
});

By the way, that todos example has been superceded by https://github.com/emberjs/examples/tree/master/todos, and even that is extremely out of date.