Ember.js：從ArrayController中刪除對象

Question

我有一個使用itemController管理一組組件的ArrayController。 在此示例中，ArrayController代表一本書，項目控制器代表該書的頁面。 每個頁面都有一個由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方法可以正常工作。 它被調用並成功創建並添加頁面到書中並將其包裝在項目控制器中。

我在使用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. 當我在ArrayController上輸出內容的content時，它會將單個頁面顯示為Ember ID為667的模型的子類（App.Page）。當我使用this.objectAt(0)內容數組索引0處的對象時this.objectAt(0) ，它不是顯示模型，而是顯示頁面的項目控制器 ，Ember ID為668。這兩個輸出不應該相同嗎？

2. 為什么findProperty方法返回undefined ？ 其他方法也是如此，例如findBy 。 我看到Ember.ArrayController擴展了Ember.ArrayProxy，然后又使用Ember.MutableArray。 我讀到您無法對Ember-Data中的不可變數組執行此類操作。

任何幫助都非常感謝。

Answer 1

當您迭代ArrayController或嘗試通過ArrayController訪問集合中的項目時，它將返回包裝有項目控制器的模型。 如果您迭代或嘗試從控制器上的模型/內容中獲取數據，它將僅返回模型。

通常，在使用ArrayController和ObjectController時，不需要使用content或model 。 這是由於兩個控制器都是代理控制器，它們代理請求到其裝飾的模型/內容。

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不是代理控制器，它是假定沒有模型支持的控制器，因此它不會代理請求。 您只需要將其更改為Ember.ObjectController可以了。

例：

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