Unable to create itemTemplate in a custom component


#1

I am trying to extend a viewModule.CustomLayoutView (looking inside Repeater component) to create a component that utilizes itemTemplate. This is the XML:

<!-- My CustomComponent -->
<cc:CustomComponent items="{{ items }}">
  <cc:CustomComponent.itemTemplate>
    <Label text="{{ text }}" />
  </cc:CustomComponent.itemTemplate>
</cc:CustomComponent>

<!-- Regular Repeater -->
<Repeater items="{{ items }}">
  <Repeater.itemTemplate>
    <Label text="{{ text }}" />
  </Repeater.itemTemplate>
</Repeater>

Code-wise, CustomComponent looks like this:

var ITEMS = "items";
var ITEMTEMPLATE = "itemTemplate";
var CUSTOMCOMPONENT = "CustomComponent";
var knownTemplates;
(function(knownTemplates) {
  knownTemplates.itemTemplate = "itemTemplate";
})(knownTemplates = exports.knownTemplates || (exports.knownTemplates = {}));
function onItemsPropertyChanged(data) {
  var component = data.object;
  component._onItemsPropertyChanged(data);
}
function onItemTemplatePropertyChanged(data) {
  var component = data.object;
  component._onItemTemplatePropertyChanged(data);
}

ccModule.CustomComponent = (function(_super) {
  __extends(CustomComponent, _super);
  function CustomComponent() {
    _super.call(this);
    
    this.itemsLayout = new StackLayout();
  }

  Object.defineProperty(CustomComponent.prototype, "items", {
    get: function() { return this._getValue(CustomComponent.itemsProperty); },
    set: function(value) { this._setValue(CustomComponent.itemsProperty, value); },
    enumerable: true, configurable: true
  });

  Object.defineProperty(CustomComponent.prototype, "itemTemplate", {
    get: function() { return this._getValue(CustomComponent.itemTemplateProperty); },
    set: function(value) { this._setValue(CustomComponent.itemTemplateProperty, value); },
    enumerable: true, configurable: true
  });

  CustomComponent.prototype.onLoaded = function() {
    _super.prototype.onLoaded.call(this);
    console.log(this.itemTemplate);
  };

  CustomComponent.prototype._onItemsPropertyChanged = function(data) {
    console.log("_onItemsPropertyChanged");
  };

  CustomComponent.prototype._onItemTemplatePropertyChanged = function(data) {
    console.log("_onItemTemplatePropertyChanged");
  };

  CustomComponent.prototype.onMeasure = function(widthMeasureSpec, heightMeasureSpec) {
    var result = viewModule.View.measureChild(this, this.itemsLayout, widthMeasureSpec, heightMeasureSpec);
    var width = utils.layout.getMeasureSpecSize(widthMeasureSpec);
    var widthMode = utils.layout.getMeasureSpecMode(widthMeasureSpec);
    var height = utils.layout.getMeasureSpecSize(heightMeasureSpec);
    var heightMode = utils.layout.getMeasureSpecMode(heightMeasureSpec);
    var widthAndState = viewModule.View.resolveSizeAndState(result.measuredWidth, width, widthMode, 0);
    var heightAndState = viewModule.View.resolveSizeAndState(result.measuredHeight, height, heightMode, 0);
    this.setMeasuredDimension(widthAndState, heightAndState);
  };

  CustomComponent.itemsProperty = new dependencyObservable.Property(ITEMS, CUSTOMCOMPONENT, new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.AffectsLayout, onItemsPropertyChanged));
  CustomComponent.itemTemplateProperty = new dependencyObservable.Property(ITEMTEMPLATE, CUSTOMCOMPONENT, new proxy.PropertyMetadata(undefined, dependencyObservable.PropertyMetadataSettings.AffectsLayout, onItemTemplatePropertyChanged));

  return CustomComponent;
})(viewModule.CustomLayoutView);

It’s more or less a carbon copy of the Repeater component, except that it doesn’t have any functionality. The problem is that the itemTemplate of CustomComponent is not an XML template like the Repeater makes it. As you can see inside the onLoaded method, I console log the itemTemplate which returns the actual wrapped view:

CONSOLE LOG > CustomComponent(11)@file:///app/main-page.xml:45:9;

But when I log the Repeater’s itemTemplate, it returns a template of it:

CONSOLE LOG > function () {
  var start;
  var ui;
  (start = new xml2ui.XmlArgsReplay(_this._recordedXmlStream, errorFormat))
    .pipe(new XmlStateParser(ui = new ComponentParser(context, errorFormat, sourceTracker)));
  start.replay();
  return ui.rootComponentModule.component;
}

What am I missing? As far as I can see when comparing my code with the Repeater module, there is nothing missing from my part. Help appreciated!