rendering children

button.js

ScaleUI.ButtonView = SC.View.extend(SC.ActionSupport, {
  useStaticLayout: true,
  classNames: ['sc-button'],
  displayProperties: ['label'],

  label: null,
  isEnabled: true,
  isEnabledBindingDefault: SC.Binding.oneWay(),
  

  render: function(context, firstTime) {
    var label = this.get('label');
    context = context.begin('span').push(label).end();
    
    sc_super();
  },

  mouseDown: function() {
    this.set('isActive', true);
    this._isMouseDown = YES;
  },

  mouseExited: function() {
    this.set('isActive', false);
  },

  mouseEntered: function() {
    if (this._isMouseDown) {
      this.set('isActive', true);
    }
  },

  rootResponder: function() {
    var pane = this.get('pane');
    return pane.get('rootResponder');
  }.property('pane').cacheable(),

  mouseUp: function(event) {
    if (this.get('isActive')) {
      if(this.get('isEnabled')) {
        this.fireAction();
      }
      this.set('isActive', false);
    }

    this._isMouseDown = NO;
  },

  touchStart: function(touch) {
    this.mouseDown(touch);
  },

  touchEnd: function(touch) {
    this.mouseUp(touch);
  },

  isEnabledChanged: function () {
    if (this.get('isEnabled')) {
      this.$().removeClass('disabled');
    } else {
      this.$().addClass('disabled');
    }
  }.observes('isEnabled'),

});

drive.js

ScaleUI.DriveView = SC.View.extend(SC.ContentDisplay, {
  classNames: ['drive'],
  useStaticLayout: true,
  slot: 0,
  childViews: ['addDriveButton'],
  contentDisplayProperties: ['usedPercent', 'readableDisposition', 'readableCapacity', 'readableType', 'isClean', 'isAddable'],

  addDriveButton: ScaleUI.ButtonView.extend({
    useStaticLayout: true,
    action: 'addDriveClicked',
    label: "_Add Drive".loc(),

  }),

  addDriveClicked: function () {
    ScaleUI.statechart.sendEvent('addDrive', this.get('content'));
    this.setPath('addDriveButton.isEnabled', false);
    this.setPath('addDriveButton.label', "_Adding".loc() + "...");
  },

  render: function(context, firstTime) {

    if(this.get('layer') === document.getElementById(this.get('layerId'))) {
      SC.debug('we are good');
    } else {
      SC.debug('shit! ' + this.get('layer') + " != " + document.getElementById(this.get('layerId')));
    }


    var drive = this.get('content');
    var slot = this.get('slot') || 0;

    if(SC.none(drive)) {
      // there is no drive in this slot - render an empty view
      context.begin('div').addClass('slot').addClass('empty');
      context.begin('span').addClass('num').push(slot + " " + "_EMPTY".loc()).end();
      context.end();

    } else {
      // there is a drive in this slot - render it
      var usedPercent = drive.get('usedPercent') || 0;
      var readableDisposition = drive.get('readableDisposition') || "_Unknown".loc();
      var readableCapacity = drive.get('readableCapacity');
      var readableType = drive.get('readableType');
      var isClean = drive.get('isClean');
      var errorText = isClean ? "_OK".loc() : "_Errors".loc();
      
      var isAddable = drive.get('isAddable');
      
      context.addClass(errorText).addClass(readableDisposition);
      
      
      context.begin('div').addClass('slot')
      context.begin('span').addClass('num').push(slot).end();
      context.begin('span').addClass('type-size').push(readableCapacity + " " + readableType).end();
      context.begin('div').addClass('gauge');
      context.begin('div').addClass('used').addStyle('height', usedPercent + '%').end();        
      context.end().end();
      
      if(!isClean) {
        context.begin('div').addClass('error').push("_Errors".loc()).end();
      }
      
      if(readableDisposition == "Adding" || readableDisposition == "Removing") {
        context.begin('div').addClass('disposition').push(readableDisposition).end();
      }
      
      // add button if addable
      if(isAddable) {
        var button = this.get('addDriveButton');
        context.begin(button.get('tagName'));
        button.renderToContext(context, true);
        context.end();
      }
    }

    this._didRenderChildViews = true;
    console.log(context.join('\n'));
  }


}),

node.js

render: function(context, firstTime) {
   var content = this.get('content');
   var drivesView = this.get('drivesView');

   if(content) {
     var isDetail = this.get('isDetail');

     ...

     if(isDetail) {

       if(drivesView) {
         context = context.begin(drivesView.get('tagName'));
         drivesView.renderToContext(context, firstTime);
         context = context.end();
       }
     ...
     }
   }
   this._didRenderChildViews = true;
 }

context.begin('div').addClass('slot')

 if(isAddable) {
   var button = this.get('addDriveButton');
   context.begin(button.get('tagName'));
   button.renderToContext(context, true);
   context.end();
 }

context.end();