javascript - Ember.js:从 ArrayController 中删除对象

Question

我有一个 ArrayController，它使用 itemController 来管理一组组件。此示例中的 ArrayController 代表一本书，项目 Controller 代表书的页面。每个页面都有一个由App.generateId生成的唯一ID。功能。页面的模型是 App.Page 。它不使用 Ember-Data。

// ArrayController
App.BookController = Ember.ArrayController.extend({
  itemController: 'page',

  addPage: function (options) {
    return this.pushObject(
      App.Page.create({
        uid: App.generateId('page')
      })
    );
  },

  removePage: function (page) {
    console.log('Content array: ' + this.get('content'));
    console.log('Content array length: ' + this.get('content').length);
    console.log('Page UID: ' + page.get('uid'));
    console.log('Page at content[0]: ' + this.objectAt(0));
    console.log(this.findProperty('uid', page.get('uid')));
  }
});


// ItemController
App.PageController = Ember.Controller.extend({});

// Page Model
App.Page = Ember.Object.extend({
  uid: ''
});

addPage方法很好。它被调用并成功创建+添加一个页面到书中并将其包装在项目 Controller 中。

我在使用 removePage 函数时遇到问题。以下是我在该方法中的控制台日志的输出(添加 1 页并尝试删除它之后):

console.log('Content array: ' + this.get('content'));
//--> Content array: <(subclass of App.Page):ember667>

console.log('Content array length: ' + this.get('content').length);
//--> Content array length: 1

console.log('Page UID: ' + page.get('uid'));
//--> Page UID: page-cm6p6pmmt5aq50i9ej7ona1dsand3mf

console.log('Page at index 0: ' + this.objectAt(0));
//--> Page at index 0: <App.PageController:ember668>

console.log(this.findProperty('uid', page.get('uid')));
//--> undefined

我对两点感到困惑:

1. 当我输出 content 的内容时在 ArrayController 上，它显示单个页面作为模型 (App.Page) 的子类，Ember ID 为 667。当我使用 this.objectAt(0) 查看内容数组索引 0 处的对象时，它向我显示的不是模型，而是页面的项目 Controller ，Ember ID 为 668。这两个输出不应该相同吗？

2. 为什么findProperty方法返回undefined ？其他方法也会发生同样的情况，例如 findBy 。我看到 Ember.ArrayController 扩展了 Ember.ArrayProxy，然后它又使用 Ember.MutableArray。我读到您不能对 Ember-Data 中的不可变数组执行此类操作。

非常感谢任何帮助。

Answer 1

当您迭代 ArrayController 或尝试通过 ArrayController 访问集合中的项目时，它会返回用项目 Controller 包装的模型。如果您迭代或尝试从 Controller 上的模型/内容获取，它只会返回模型。

通常，在使用ArrayController和ObjectController时，您不需要使用content或model。这是因为两个 Controller 都是代理 Controller ，它们将请求代理到它正在装饰的模型/内容。

console.log('Content array length: ' + this.get('length'));
console.log('Page UID: ' + page.get('uid'));
console.log('Page at content[0]: ' + this.objectAt(0));
console.log(this.findBy('uid', page.get('uid')));

findProperty 已弃用，您应该使用 findBy (尽管存在未定义的问题，我会尝试快速复制)。

此外，您的操作 addPage 和 removePage 应该位于操作哈希中。

actions: {
  addPage: function(){...},
  removePage: function(){...},

}

问题

真正的问题是您的 itemController 正在扩展 Ember.Controller。 Ember.Controller 不是代理 Controller ，它是一个假设没有模型支持的 Controller ，因此它不会将请求代理到它。您只需将其更改为 Ember.ObjectController 就可以了。

示例:

http://emberjs.jsbin.com/wulosufu/2/edit