1

假设我想将 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'
});
4

1 回答 1

2

通常当你在处理这样的 DOM 操作插件时，我喜欢将它添加到视图的didInsertElement方法中，其中this.$()是代表视图元素的 jQuery 对象。

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

顺便说一句，该 todos 示例已被https://github.com/emberjs/examples/tree/master/todos取代，即使这样也已经过时了。

于 2012-09-20T11:41:42.610 回答