active_directory.handlebars

{{#view "ScaleUI.ActiveDirectoryView"}}
  {{#if content.isSummary}}
    <div class="summary"><p>This is the active directory detail</p>
      <p>{{content.domain}}</p>
      <p>{{content.server}}</p>
		
      {{#view "showDetailButtonView"}}
        <button>Detail</button>
      {{/view}}
		
    </div>
  {{/if}}
  {{#if content.isDetail}}
    ...
  {{/if}}
{{/view}}

active_directory.js

ScaleUI.ActiveDirectoryView = SC.TemplateView.extend(Ki.StatechartManager,
/** @scope ScaleUI.ActiveDirectoryView.prototype */ {
  content: null,
  templateName: "active_directory",
  contentBinding: 'ScaleUI.activeDirectoryController',
  
  initialState: 'summaryView',

  summaryView: Ki.State.design({
    
    enterState: function() {
      console.log("entering summaryView");
      ScaleUI.activeDirectoryController.set('isSummary',true);
      ScaleUI.activeDirectoryController.set('isEditable',true);
    },
    
    detailClicked: function() {
      this.gotoState('detailView');
    },
    
    exitState: function() {
      ScaleUI.activeDirectoryController.set('isSummary',false);
    },

  }),
  
  detailView: Ki.State.design({
    enterState: function() {
      console.log("entering detailView");
      ScaleUI.activeDirectoryController.set('isDetail',true);
    },
    ...
  }),

  showDetailButtonView: SC.TemplateView.extend({
    target: ???
    action: 'detailClicked',
  }),

})