I am setting custom style for selected item in a list using click handlers - but loosing that style when the collection updates - what is the right way to do this?
Template['esXYZTable'].events({
'click li': function (e, template) {
$(e.currentTarget).addClass("esxyzSelected");
}
});
As seen above a new classs is added to the selected li
to make it appear different on UI. But it looses that class after collection update.
The html
<ul>
{{#each xyzOptions}}
<li>
{{this.xField}} - {{this.yField}}
</li>
{{/each}}
</ul>
the collection is updated as something like below
self.esxyzOptions.remove({});//clear old data
for (var i = 0; i < timeFields.length; ++i) {
for (var j = 0; j < measureFields.length; ++j) {
trendObj['yField'] = measureFields[j];
trendObj['_id'] = measureFields[j];;
self.esxyzOptions.insert(trendObj);
}
}
Q: Based on the currently selected list Item, I am showing a form - now, how to make my list item retain the selection (so that the form can continue to be displayed) even after the collection update?
Right now, after collection update, user has to manually click on that old item again to select it and get that associated form displayed.