Wrapping controller example

MyComponent.js

(function(opts) {
  'use strict';

  // Override MyComponent
  $.MyComponent = $.content;

  // Append all the children
  var children = opts.children || [];

  if (OS_ANDROID) {
    for (var i = 0; i < children.length; i++) {
      $.content.add(children[i]);
    }
  } else {
    $.content.add(children);
  }

  // Swizzle the methods that export the root
  _.extend(exports, {
    /* Swizzling getTopLevelViews */
    getTopLevelViewsOrig: exports.getTopLevelViews,
    getTopLevelViews: function() {
      return [$.content];
    },

    /* Swizzling getView */
    getViewOrig: exports.getView,
    getView: function() {
      if (!arguments.length) {
        return $.content;
      }

      return this.getViewOrig.apply(this, arguments);
    }
  });

}(arguments[0] || {}));

MyComponent.tss

"#MyComponent": {
  layout: 'vertical'
},
"#content": {
  height: Ti.UI.SIZE
}

MyComponent.xml

<Alloy>
  <View>
    <Label text="I'm the wrapper!"/>
    <View id="content"/>
  </View>
</Alloy>