Tapping items refers to previous items, instead of current

Hi,
I'm trying to learn Enyo JS. I find it fascinating, but still a bit difficult to master. Especially those inSender and inEvent arguments are hard to get my head around.

I now have this pretty basic list, in which I want to get feedback in an alert which item I tapped. But every time, instead it gives me the title of the item that I had previously tapped. Why is that? What am I doing wrong. I'd be grateful for some explanation! Here are the first little steps of this great future Enyo app of mine ;-)
enyo.kind({
	name: "PanelSample",
	kind: "Panels",
    classes: "mystyle enyo-unselectable",
    arrangerKind: "CarouselArranger",
    components: [
        {layoutKind: "FittableRowsLayout", name: "accountView", components: [
            {kind: "Control", content: "Account View"},
            {kind: "List", touch: true, fit: true, count: 60, onSetupItem: "setText", components: [
                {kind: "Control", name: "item", style: "padding: 10px;", ontap: "itemTap", components: [
                    {kind: "Control", name: "itemtitle"}
                ]}
            ]}
        ]},
        {name: "listView", content: "List View"},
    ],
    setText: function(inSender, inEvent) {
        this.$.itemtitle.setContent("Item number " + inEvent.index);
        return true;
    },
    itemTap: function (inSender, inEvent) {
        if (enyo.Panels.isScreenNarrow(inSender, inEvent)) {
            this.setIndex(1);
        }
        alert(this.$.itemtitle.content);
    }
});
One unrelated question. I noticed those classes like 'enyo-unselectable', and 'enyo-fit'. I've only seen them occurring in the sparse samples of Enyo. Is there any documentation about these classes? A complete list and description? Couldn't find it...

Thanks in advance!
David

Comments

  • Alas, we don't have those CSS classes documented very well. Most of the core ones are listed in enyo's dom.css file.

    The reason you're getting content from a item that's not the tapped one is the nature of enyo.List. It uses a flyweight pattern where one copy of the inner JS components is used to stamp out lots of items. However, it means that you can't really refer to the items after creation time, but instead need to recreate the data using the same routines you used to populate them in the onSetupItem handler.

    If you want live controls, use enyo.Repeater (possibly with a enyo.Scroller wrapped around it).
  • Thank you very much, Ben. You're giving me some leads for me to move on. Very useful.
Sign In or Register to comment.