Javascript sproutcore主页重构

我自己开发了我的第一个sproutcore应用程序。现在resource/mainpage中的代码变大了。我想 重构代码，使视图位于各自独立的文件中

如何做到这一点

示例代码

Tp.mainPage = SC.Page.design({
  mainPane: SC.MainPane.design({
  childViews: [SC.TabView.design({
    value: "welcome",
    items: [
        { title: "Welcome", value: "welcome"},
        { title: "route", value: "Tp.mainPage.contentview"},
        { title: "manifold", value: "manifold"},

    ],
    itemTitleKey: 'title',
    itemValueKey: 'value',
    layout: { left:12, right:12, top:12, bottom:12},
    userDefaultKey: "mainPane",
  })]
 }),
 welcome: SC.LabelView.design({ ..some code }),

 contentview: SC.SplitView.design({
  ..mucho code... }),

 manifold: SC.View.extend({
  ..mucho code... }),

我想重构出许多代码部分

sc-gen view Tp.WelcomeView --target=Tp

这将在“视图”文件夹中生成一个视图

在mainpage.js中

welcome: Tp.WelcomeView.design({ ... maybe layout ... })

希望这有帮助