Responding to DataRepeater ontap While Selection Is Disabled

jbensman

I'm using a DataRepeater to produce a list of items that display some inputs in another control (not part of the repeater) when selected. While these inputs are in a dirty state, I lock the DataRepeater by setting 'selection' to false, so that a stray click on a different repeater item won't discard the user's unsaved changes.

When they do click on a different item, I'd like to pop-up a confirmation and, if they click yes, to then discard the user's unsaved changes and re-enable the DataRepeater, setting the selected index to what the user had clicked on.

The problem is that, although the repeater's ontap event still fires when selection is false, I can't find a way to determine which item was being tapped, since selected is (of course) not being set.

Can anyone point me toward a solution here, or maybe show me a better way of intercepting the selection of a new DataRepeater item before the new item is actually selected?

A fiddle showing the problem is here: jsfiddle.net/2kcyjkjc/1/

enyo.kind({
	name: "App",
	kind: "enyo.Application",
	view: "TestView"
});

enyo.kind({
    name: 'TestView',
    
    selectedCountTotal: 0,
    
    components: [
        {kind: 'onyx.Button', content: 'Disable Select', ontap: 'goDisable'},
        {name: 'repeater', kind: 'enyo.DataRepeater', ontap: 'itemSelected',
         components: [
            {
                components: [{name: 'display'} ],
                bindings: [{from: '.model.display', to: '.$.display.content'}]
            }
        ]},
        {name: 'selectedItem', content: 'Currently Selected : '},
        {name: 'selectedCount'}
    ],
    
    bindings: [
        {from: '.collection', to: '.$.repeater.collection'}    
    ],
    
    create: function () {
        this.inherited(arguments);
        this.collection = new enyo.Collection();
        this.collection.add(this.data);
    },
    
    itemSelected: function (inSender, inEvent) {
        // item obviously only changes if repeater.selection is true:
        var item = this.$.repeater.selected().get('display');
        
        this.selectedCountTotal++; // This continues to climb after select is disabled.
        this.$.selectedCount.setContent(this.selectedCountTotal);
        this.$.selectedItem.setContent('Currently Selected : ' + item);
    },
    
    goDisable: function (inSender, inEvent) {
        this.$.repeater.selection = false;    
    },
    
    data: [
        {display: 'Alpha'},
        {display: 'Beta'},
        {display: 'Gamma'},
    ]
    
});

new App().renderInto(document.body);

Thanks for any help!

jbensman

Well, it turns out to be simple. The inEvent parameter in itemSelected has an index property that can be used to look up the selected item in the collection. (I had thought that was something a Repeater had but a DataRepeater did not.) Updated fiddle: jsfiddle.net/2kcyjkjc/2/