Sproutcore 嵌套数组一对多绑定

Question

我有三层对象，每一层都是一对多。我希望，当选择不同的笔记本时，页面和列视图元素能够获得级联更新。

笔记本>页数>列

使用notebooksController和notebookController我可以绑定

App.Notebook = SC.Record.extend({
    name: SC.Record.attr(String),
    pages: SC.Record.toMany('App.Page', {isMaster: YES, inverse: 'notebook'})
});

App.Page = SC.Record.extend({
    pageNumber: SC.Record.attr(Number),
    notebook: SC.Record.toOne('App.Notebook', {isMaster: NO, inverse: 'pages'}),
    columns: SC.Record.toMany('App.Column', {isMaster: YES, inverse: 'page'})
});

App.Column = SC.Record.extend({
    columnNumber: SC.Record.attr(Number),
    page: SC.record.toOne('App.Page', {isMaster: NO, inverse: 'columns'})
});

接下来，我似乎无法让pagesController的内容绑定工作。我希望pageController、pageController、columnsController 和columnController 的内容向下级联，以便当用户单击不同的笔记本时，呈现的视图会自动切换到正确的内容。

ArrayController notebooksController
// contents filled from fixture
ObjectController notebookController
// bound to notebooksController selection
ArrayController pagesController
// contentBinding: 'notebookController.pages' does not work!
ObjectController pageController
// bound to pagesController selection
// and down to column

Answer 1

假设您有一个笔记本，请尝试

App.notebookController = SC.ObjectController.create({
    // call App.notebookController.set('content', aNotebook)
    // to set the content on this controller
});

App.pageController = SC.ArrayController.create({
    // the notebookController is a proxy to the its content, so you dont need 
    // 'content' in the binding contentBinding: 'App.notebookController.pages'

    // bind the list view to App.pagesController.arrangedObjects.  If you look in the code
    // arranged objects is a reference to the array controller itself, which has array methods
    // on it
});

App.pageSelectionController = SC.ObjectController.create({
    //  You need to add 
    // 
    //  selectionBinding: 'App.pageSelectionController.content
    //
    //  to the collection view where you select the page

    // you can do this in places to see when things change.  This controller is just a proxy
    // to the selected page. 
    selectionDidChange: function(){
        console.log('page selection changed to [%@]'.fmt(this.get('content');
    }.observes('content')
});

App.columnsController = SC.ArrayController.create({
   contentBinding: 'App.pageSelectionController.columns'

   // again, where you want to show the columns, bind to
   // App.columnsController.arrangedObjects
});

Answer 2

我找到了答案。
事实证明，您确实可以简单地使用 App.notebookController.pages。

问题是，我的灯具设置不正确。将子级映射到父级是不够的，必须将父级映射回子级。

我最初有：

Autofocus.Notebook.FIXTURES = [
  { guid: 1, title: "Home Notebook", columnCount: 2},
  { guid: 2, title: "Work Notebook", columnCount: 2}
];

当我执行以下操作时，一切都已修复：

Autofocus.Notebook.FIXTURES = [
  { guid: 1, title: "Home Notebook", columnCount: 2, pages: [11, 12] },
  { guid: 2, title: "Work Notebook", columnCount: 2, pages: [21, 22]}
];