BackboneJS向单击的元素添加和删除类

Question

I have this Backbone App where I fetch a JSON file, which displays the alphabetletters, when clicking on one of those letters, it will display the relevant Artists starting with that letter. It works so far but what I want to achieve is to add some kind of active -class to the clicked letter. How can i achieve this?

My View looks like this:

function (App, Backbone) {

    var Alphabet = App.module();
    var LetterView = Backbone.View.extend({
        template: 'alphabetlist',
        tagName: 'li',  
        serialize: function() {
            return this.model.toJSON();
        },  

    });

    Alphabet.View = Backbone.View.extend({
        tagName: 'ol',
        className: 'alist',
        initialize: function() {
            this.listenTo(this.collection, 'all', this.render);
            this.listenTo(this.collection, 'sync', this.onSync);

            this.collection.fetch();
        }, 
        beforeRender: function() {
            var self = this;

            this.collection.each(function(item) {
                self.insertView(new LetterView({model: item}))
            })
        },
    });
    Alphabet.AlphabetCollection = Backbone.Collection.extend({
        url: 'js/json/AlphabetCollection.json'
    });

    return Alphabet;
}

So can anyone help me out? Thanks in advance...

EDIT

When I do:

    events: {
        'click a' : 'toggle'
    },

    serialize: function() {
        return this.model.toJSON();
    },

    toggle: function(event) {
        this.$el.parent().addClass('test');
    },

the <ol> -element gets the class, but still not targetting the <li> -element...

Answer 1

Should be like this.

var LetterView = Backbone.View.extend({
    template: 'alphabetlist',
    tagName: 'li',
    events : {
        "click li" : "toggle"
    },  
    serialize: function() {
        return this.model.toJSON();
    },  

    toggle : function(e){
        var active = $(e.currentTarget);
        active.addClass('active');
        $('li').not(active).removeClass('active');
    }

});