Sproutcore嵌套数组一对多绑定

时间:2011-07-01 03:35:06

标签: sproutcore sproutcore-controllers

我有三层对象,每层都是一对多。我想,当选择不同的笔记本时,页面和列视图元素会得到级联更新。

笔记本>页面>列

使用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的内容绑定。我希望将pagesController,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

2 个答案:

答案 0 :(得分: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
});

答案 1 :(得分:0)

我找到了答案。 事实证明,您确实可以简单地使用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]}
];