Some Repeater Problems

wozzashek

I have been messing around with enyo, and am trying to populate a repeater with data from an API call. I keep getting an error in the setupWorlds function though: cannot call method 'setContent' of undefined. Please note i actually used Ares to make this. Not sure what I am doing wrong. see code below:

(removed code, see below post)

wozzashek

okay the code in the original post looked crap and was tough to read to second attempt to post it:

enyo.kind({
	name: "World",
	kind: "enyo.Control",
	published: {
	},
	events: {
	},

	layoutKind: "FittableRowsLayout",

	components: [
		{kind: "onyx.Toolbar", components: [
			{content: "Region"},
			{kind: "onyx.PickerDecorator", name: "worldRegion", onSelect: "getWorlds", components: [
				{},
				{kind: "onyx.Picker", name: "worldRegionOptions", components: [
					{content: "North America", active: true},
					{content: "Europe"}
				]}
			]},
			{content: "Language"},
			{kind: "onyx.PickerDecorator", name: "worldLanguage", onSelect: "getWorlds", components: [
				{},
				{kind: "onyx.Picker", name: "worldLanguageOptions", components: [
					{content: "EN", active: true},
					{content: "FR"},
					{content: "DE"},
					{content: "ES"}
				]}
			]}
		]},
		{kind: "enyo.Scroller", fit: true, components: [
			{kind: "enyo.Repeater", name: "worldRepeater", onSetupItem: "setupWorlds", components: [
				{name: "world", components: [
					{tag: "span", name: "worldName"},
					{tag: "span", name: "worldID"}
				]}
			]}
		]}
	],
	worldArray: '',
	create: function () {
		this.inherited(arguments);
		// initialization code goes here
	},
	rendered: function () {
		this.inherited(arguments);
		this.getWorlds();
	},
	getWorlds: function (inSender, inEvent) {
		//var searchLanguage = this.$.worldLanguageOptions.getSelected().getContent();
		var request = new enyo.Ajax({
            url: "htt" + "ps://api.guildwars2.com/v1/world_names.json?"
        });
        request.response(this, "processWorlds");
        request.go({
            lang: "en"
        });
	},
	processWorlds: function (inRequest, inResponse) {
        if (!inResponse) {
            return;
        }
		this.worldArray = inResponse;
		this.$.worldRepeater.setCount(this.worldArray.length);
    },
	setupWorlds: function(inSender, inEvent) {
		var worldInfo = this.worldArray[inEvent.index];
		this.$.worldName.setContent(worldInfo.name+" --- ");
		this.$.worldID.setContent(worldInfo.id);
		return true;

	}
});

unwiredben

Make your setupWorlds call do this:

setupWorlds: function(inSender, inEvent) {
	var item = inEvent.item;
	var worldInfo = this.worldArray[inEvent.index];
	item.$.worldName.setContent(worldInfo.name+" --- ");
	item.$.worldID.setContent(worldInfo.id);
	return true;
}

You need to be setting properties on the item passed in the inEvent, not on the Hello instance.

(Fixed code formatting by spilling URL into two parts--something with the linkification messed it up)

wozzashek

so I added the var item= inEvent.item
But i still get an error on this line: this.$.worldName.setContent(worldInfo.name+" --- ");
Error is: Uncaught TypeError: cannot call method 'setContent' of undefined.

It's as if it's not seeing anything inside my repeater.

This kind is called by App.js does that affect it in anyway?

sugardave

It's because you're still accessing this.$.worldName instead of item.$.worldName, at least according to that error. inEvent.item is the delegate/wrapper control for the item being rendered at that time and named components of that row (worldName, for instance) are owned by that delegate, not this.

wozzashek

Thanks guys for the explanations. Solved my issue.

tienn2t

thanks so much.