SC.TemplateChangingView

template_changing_view.js

SC.TemplateChangingView = SC.TemplateView.extend(
    /** @scope SC.TemplateChangingView.prototype */{
   
    templateNameDidChange: function() {
        SC.Logger.debug("Template name was set to " + this.get('templateName'));
        this.rerender();
    }.observes('template'),
    
    /**
      Called when the template property associated with this view changes.
      
      We destroy all registered children, then render the view again and insert
      it into DOM.
    */
    rerender: function() {
        var idx, len, childViews, childView;
        
        childViews = this.get('childViews');
        len = childViews.get('length');
        for (idx = len-1; idx >= 0; idx--) {
            childView = childViews[idx];
            childView.$().remove();
            childView.removeFromParent();
            childView.destroy();
        }
        
        var context = this.renderContext(this.get('tagName'));
        var elem;
        this.renderToContext(context);
        
        elem = context.element();
        this.$().replaceWith(elem);
        this.set('layer', elem);
        this._notifyDidCreateLayer();
    }
});

test_statechart.js

testSpace: SC.State.design({
    enterState: function() {
        Analyzer.mainPane = SC.TemplatePane.append({
            layerId: 'myApp',
            templateName: 'application',
  
            contentView: SC.TemplateView.create({
                templateName: 'testSpace',
                testView: SC.TemplateChangingView.create()
            })
        });
    },
    
    exitState: function() {
        Analyzer.mainPane.remove();
    },
    
    // --------- Actions ---------------------------------------------------------------
    
    onEmptyDetails: function() {
        SC.Logger.debug('Open Empty Details');
        this.gotoState('emptyDetails');
    },
    
    onTestLink1: function() {
        SC.Logger.debug('Open Test Details 1');
        this.gotoState('testDetails1');
    },
    
    onTestLink2: function() {
        SC.Logger.debug('Open Test Details 2');
        this.gotoState('testDetails2');
    },
    
    // --------- States -----------------------------------------------------------------
    
    initialSubstate: 'emptyDetails',
    
    emptyDetails: SC.State.design({
        enterState: function() {
            Analyzer.getPath('mainPane.contentView.contentView.testView').set('templateName', 'empty');
        }
    }),
    
    testDetails1: SC.State.design({
        enterState: function() {
            Analyzer.getPath('mainPane.contentView.contentView.testView').set('templateName', 'test1');
        }
    }),
    
    testDetails2: SC.State.design({
        enterState: function() {
            Analyzer.getPath('mainPane.contentView.contentView.testView').set('templateName', 'test2');
        }
    })
    
})