ftemplate = handlebars.compile ''' <div class="filter"> <ul class="list"> <li><a href="#" class="today active">today</a></li> <li><a href="#" class="month">month</a></li> <li><a href="#" class="year">year</a></li> </ul> </div>''' i have list want add class based on element clicked. following coffeescript code using to achieve that.
class exports.infocontroller extends backbone.view tagname: 'div' classname : 'box' events: "click a.today" : "_filtertodayclicked" "click a.year" : "_filteryearclicked" "click a.month" : "_filtermonthclicked" _filteryearclicked: (e) => e.preventdefault() @model.gototimeframe "year" _filtermonthclicked: (e) => e.preventdefault() @model.gototimeframe "month" _filtertodayclicked: (e) => e.preventdefault() @model.gototimeframe "day" what i'm trying do reference this.parent , cycle through elements, removing "active" class each (if exists) , adding element clicked. in pseudocode:
_filteryearclicked(e) => e.preventdefault() (this).parent.('a').removeclass('active') (this).addclass('active) the reason cannot access class 'list' , use instead of this.parent because there number of other lists (with same class) controlled same controller , not want have classes in other lists changed. have tried searching ways online, haven't found working solution @ all. or links useful documentation appreciated
you can @ event's currenttarget figure out are, closest appropriate root , find come down:
_filteryearclicked: (e) => e.preventdefault() $t = $(e.currenttarget) $t.closest('ul').find('.active').removeclass('active') $t.addclass('active') #... demo: http://jsfiddle.net/ambiguous/rpltu/ (only year hooked up)
or can use view's $el restrict .active search current view:
_filteryearclicked: (e) => e.preventdefault() @$el.find('.active').removeclass('active') $(e.currenttarget).addclass('active') #... demo: http://jsfiddle.net/ambiguous/chkut/ (only year hooked up)
Comments
Post a Comment