How to split a view file in Sproutcore?

Question

Suppose you have a SC.SplitView to implement a master-detail functionality, right now I would like to have one developer to work on customizing the SC.ViewList of the master piece, while have another to work on customizing and usability of the SC.View of the detail.

As the page is growing more and more I was wondering if there would be a known practice on how to split the file in two having the SC.View master-child in one file and the SC.View detail-child in another.

Has anyone run into this need?

Answer 1

You can easily split your views into multiple files and this is highly encouraged!

The main premise is that you will have three views:

1. The SC.SplitView
2. The left view, and
3. The right view

You'll need to use sc_require so that the SplitView can find the others. Here's a quick example:

# Inside my_app/resources/main_page.js

sc_require('views/left_split_panel')
sc_require('views/right_split_panel')

SplitView.extend({
  childViews: ['leftPanel', 'rightPanel'],

  leftPanel: MyApp.LeftSplitPanelView.extend(SC.SplitChild, {
    minimumSize: 200
  }),

  rightPanel: MyApp.RightSplitPanelView.extend(SC.SplitChild, {
    autoResizeStyle: SC.RESIZE_AUTOMATIC
  })
})

Then, the other two views:

#inside my_app/views/left_split_panel.js

MyApp.LeftSplitPanelView = SC.View.extend({
  childViews: ['someView anotherView'],

  someView: SC.View.extend(...),
  anotherView: SC.View.extend(...)
})

and

#inside my_app/views/right_split_panel.js

MyApp.RightSplitPanelView = SC.View.extend({
  childViews: ['dudeView sweetView'],

  dudeView: SC.View.extend(...),
  sweetView: SC.View.extend(...)
})

Checkout the "Separating Views" section of the second Getting Started guide for more info and perhaps a better example (quick note: SC.View.design() and SC.View.extend() are almost identical, but .design() has been deprecated; we're in the process of updating the guides to match best practices).