Generic SC problems

main_page.js

// ==========================================================================
// Project:   MonsterDesigner
// Copyright: @2011 My Company, Inc.
// ==========================================================================
/*globals MonsterDesigner */

// The main pane is made visible on screen as soon as your app is loaded.
// Add childViews to this pane for views to display immediately on page 
// load.
MonsterDesigner.mainPage = SC.Page.design({
    // The main pane is made visible on screen as soon as your app is loaded.
    // Add childViews to this pane for views to display immediately on page 
    // load.
    mainPane: SC.MainPane.design({
        defaultResponder: 'MonsterDesigner.statechart',
        childViews: 'splitView'.w(),

        splitView: SC.SplitView.design({
            backgroundColor: 'red',
            dividerThickness: 1,
            defaultThickness: 200,
            layout: { centerX: 0, centerY: 0, width: 960, height: 768 },

            topLeftView: SC.ScrollView.design({
                layout: { top: 36, bottom: 32, left: 0, right: 0 },
                contentView: SC.ListView.design({
                    backgroundColor: 'cyan', 
                    contentValueKey: 'name',
                    contentBinding: 'MonsterDesigner.monstersController.arrangedObjects',
                    selectionBinding: 'MonsterDesigner.monstersController.selection',
                    actOnSelect: YES,
                    action: 'showMonster'
               })
            }),

            bottomRightView: SC.ContainerView.design({
                backgroundColor: 'purple',
                layout: { left: 201 },
                nowShowingBinding: 'MonsterDesigner.displayController.nowShowing'
            })
        })
    }),
    
    // This is where we define the other views that the mainPage needs access to.
    // For sake of file brevity, the actual views are defined in their own files.
    
    // monsterstatblock_view.js
    monsterStatBlockView: MonsterDesigner.monsterStatBlockView
});

monsterstatblock_view.js

// ==========================================================================
// Project:   MonsterDesigner
// Copyright: @2011 My Company, Inc.
// ==========================================================================
/*globals MonsterDesigner */

MonsterDesigner.monsterStatblockView = SC.ScrollView.create({
    layout: { width: 300 },
    // classNames: 'scrollbars',
    backgroundColor: 'yellow',
    contentView: SC.View.design({
        contentBinding: 'MonsterDesigner.monsterController.content',
        backgroundColor: 'blue',
        layout: { height: 766 },
        childViews: 'statBlockGeneralInfoView'.w(),

        statBlockGeneralInfoView: SC.View.create({
            backgroundColor: 'orange',
            layout: { height: 60 }, 
            childViews: 'nameLabelView levelRoleLabelView keywordsLabelView xpLabelView'.w(),
            
            nameLabelView: SC.LabelView.create({
                layout: { top: 0, left: 0, width: 0.5, height: 20 },
                valueBinding: 'parentView.parentView.content.name'
            }),
            levelRoleLabelView: SC.LabelView.create({
                layout: { top: 0, left: 0.5, width: 0.5, height: 20 },
                value: 'Test 1'
            }),
            keywordsLabelView: SC.LabelView.create({
                layout: { top: 20, left: 0, width: 0.5, height: 20 },
                value: 'Test 2'
            }),
            xpLabelView: SC.LabelView.create({
                layout: { top: 20, left: 0.5, width: 0.5, height: 20 },
                value: 'Test 3'
            })
        })
    })
});

ready.js

// ==========================================================================
// Project:   MonsterDesigner
// Copyright: @2011 My Company, Inc.
// ==========================================================================
/*globals MonsterDesigner */
/*globals Ki*/

MonsterDesigner.statechart = Ki.Statechart.create({

  autoInitStatechart: NO,

  rootState: Ki.State.design({
    initialSubstate: 'ready',

    ready: Ki.State.plugin('MonsterDesigner.ReadyState')
  })
});

MonsterDesigner.ReadyState = Ki.State.extend({
    // Basic state handling
    initialSubstate: 'loading',
    
    enterState: function() {
        console.log('Entering MonsterDesigner.ReadyState.');
        MonsterDesigner.getPath('mainPage.mainPane').append();
    },

    exitState: function() {
        console.log('exiting MonsterDesigner.ReadyState.');
        MonsterDesigner.getPath('mainPage.mainPane').remove();
    },

    // Substates
    
    loading: Ki.State.design({
        // Status of the loading, for when the fetching is done asynchronously.
        _loaded: 0, // This keeps track of the fetches that have been loaded already.
        _total: 0, // This keeps track of how many fetches we have. Not sure why he initializes it to 0 though.
        
        enterState: function() {
            console.log('Entering MonsterDesigner.ReadyState.loading.');
            // Set the status variables properly.
            this._loaded = 0;
            this._total = 1;    // We're doing only one fetch at the moment.
            
            // Call the fetch methods.
            this._loadMonsters();
        },
        
        exitState: function() {
            console.log('Exiting MonsterDesigner.ReadyState.loading.');
            // Nothing in particular has to be done here.
        },
        
        _loadMonsters: function() {
            console.log('Loading Monsters.');
            var query = SC.Query.local(MonsterDesigner.Monster);
            var data = MonsterDesigner.store.find(query);
        
            data.addObserver('status', this, function observer() {
                if(data.get('status') === SC.Record.READY_CLEAN) {
                    data.removeObserver('status', this, observer);
                    MonsterDesigner.monstersController.set('content', data);
                    this.get('statechart').invokeStateMethod('dataLoaded');
                }
                // TODO: should check for error messages as well.
            });
        
            // In case our data was already loaded (ie. synchronous).
            data.notifyPropertyChange('status');
        },
        
        dataLoaded: function() {
            console.log('Data has been loaded.');
            // Process check. Are we done with fetching?
            this._loaded++;
            if(this._loaded === this._total) {
                this.get('statechart').sendAction('gotoNone');
            }
        }        
    }),
    
    none: Ki.State.design({
        // Basic state handling
        initialSubstate: 'none', 
        
        enterState: function() {
            console.log("Application ready");
        },

        exitState: function() {
            console.log('Exiting application.');
            // Nothing needs to be done here at the moment.
        },
        
        // Substates
        none: Ki.State,
        
        showingMonster: Ki.State.design({
            // Some variables
            _store : null,
            
            // Basic state handling
            enterState: function(context) {
                console.log('Entering MonsterDesigner.ReadyState.showingMonster.');
                // Use context to determine which monster we're showing.
                var monster = context ? context.monster : null;
                // Create parallel store.
                var store = MonsterDesigner.store.chain();
                
                // If we have a valid monster.
                /// @todo: Why, if we already have a valid monster, are we looking for it in the parallel store? Is that because we need a duplicate which keeps the real one safe until ready?
                if(monster) {
                    monster = store.find(MonsterDesigner.Monster, monster.get('guid'));
                    MonsterDesigner.monsterController.set('content', monster);
                }
                this._store = store;
                
                // Trying out stackLayoutView for dynamic cell heights.
                // MonsterDesigner.displayController.set('nowShowing', 'stackLayoutView');
                
                MonsterDesigner.displayController.set('nowShowing', 'monsterStatBlockView');
            },
            
            exitState: function() {
                console.log('Exiting MonsterDesigner.ReadyState.showingMonster.');
                this._store.discardChanges().destroy();
                this._store = null;
            },
            
            // Actions
            cancel: function() {
                console.log('Canceling changes.');
                this._store.discardChanges();
            },

            save: function() {
                console.log('Saving changes.');
                this._store.commitChanges(true);
            },
            
            rowWasSelected: function(sender) {
                console.log('Row was selected.');
                console.log(sender.get('content').get('selection').firstObject().get('name'));
                console.log(sender.toString());
                console.log(sender.get('content').toString());
                console.log(sender.get('content').get('selection').toString());
                return YES;
            }
        }),
        
        // Actions
        showMonster: function(sender) {
            console.log('Showing monster.');
            var monster = MonsterDesigner.monstersController.get('selectedMonster');
            this.gotoState('ready.none.showingMonster', { monster: monster });
            return YES;
        }
    }),

    // Actions
    gotoNone: function() {
        console.log('Going to none.');
        this.gotoState('ready.none');
        return YES;
    }
});