Dynamically Creating Repeater Components

Is it possible to add components to an enyo.Repeater at runtime?

I'm trying to create a Repeater that can render different controls in the row based on the data it retrieves from the server, so the declarative approach hasn't been a good fit.

I've tried adding the components in create and rendered, calling render on the repeater after adding the component or just calling setCount, but the repeater is always rendered as an empty div.

fiddle: jsfiddle.net/7u5qxh7q/3/

enyo.kind({
name: "TestView",

components: [
{kind: "onyx.Button", content: "Go", ontap: "buildRepeaterItems"},
{name: "repeater", kind: "enyo.Repeater"}
],

buildRepeaterItems: function (inSender, inEvent) {
this.$.repeater.createComponent(
{name: "lineItem", content: "foo"},
{owner: this.$.repeater}
);
this.$.repeater.render();

this.$.repeater.setCount(5);
}
});
Thanks for any help you can provide!

Comments

  • It looks like it's possible if you create the repeater and row all at once:

    fiddle: http://jsfiddle.net/7u5qxh7q/4/

    buildRepeaterItems: function (inSender, inEvent) {
    this.createComponent(
    {name: "repeater", kind: "enyo.Repeater", components: [
    {content: "Foo"}
    ]}, {owner: this}
    );
    this.$.repeater.setCount(5);
    }
    But it seems strange to me that it's not possible to create or alter the row itself.
  • Admitedly it's a little "hackish" but after looking at the source for enyo.Repeater I reworked your fiddle:
    It will do what you want. Most likely there is a better way. This is quick and dirty.
    http://jsfiddle.net/7u5qxh7q/5/
  • @cadguy's approach is the most direct path. It's not a public API so you run the risk it could change on you but I'd say that's pretty unlikely in this case. A few other options include:

    1. Include all possible controls within the repeater but only render the appropriate one for the data. http://jsfiddle.net/7u5qxh7q/6/

    2. Create a sub-kind of Repeater with the desired internal controls for each kind of data and create the right one at runtime for the data. This gives you reasonable separation of concerns between views and encapsulation of the view setup.

    3. Skip Repeater and set up the controls yourself. Repeater can be convenient but really is pretty simple. You can emulate the same behavior by iterating over your data set and creating the desired control for each. If you need to rerender, you can call destroyClientControls() on the container and run your creation logic again.

    Ryan
Sign In or Register to comment.