javascriptsproutcoresproutcore-views

sproutcore main page refactoring

I build myself my fist sproutcore app. Now the code in resource/mainpage gets big. I want to refactor the code so views are in their own seperate files.

How to do this?

example code

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... }),

I want to refactor out the mucho code parts.

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

    this will generate a a view in the views folder.

    In your mainpage.js

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

    Hope this helps