向Ember視圖添加JQuery UI選項

Question

假設我想修改Ember.js示例todo app中的視圖以調整大小。

jQuery代碼要做到這一點是：

$("#container").resizable() 

其中的#container代表一個div。我不確定此代碼段所屬的應用程序結構中的位置。它是否進入app.js？內容如下所列，我不知道哪種方法把上面的代碼中是最合適的。

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

通常，當你在處理DOM操作插件，如這個，我願意將它添加到view的didInsertElement方法，其中this.$()是一個代表views元素的jQuery對象。

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

順便說一句，那待辦事項例如已被https://github.com/emberjs/examples/tree/master/todos所取代，甚至認爲是非常過時了。