BackboneJS - 在渲染后将类添加到单击的元素

Question

在单击相关的<a href>并且渲染了视图之后，可以向父代<li> -element添加类吗？我可以使用afterRender -function

我有这样一个观点：

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; 
} 

我的JSON文件看起来像：

[ 
{ 
    "name":"0-9", 
    "id":"1", 
    "url":"special" 
}, 
{ 
    "name":"A", 
    "id":"2", 
    "url":"a" 
}, 
{ 
    "name":"B", 
    "id":"3", 
    "url":"b" 
}, 
    ...etc. 

] 

和HTML模板：

<a href="#artists/{{url}}">{{name}}</a> 

我想要实现父母<li> -element变成某种“活动“类，因此它表示已经单击了哪个字母以及哪个名称以rleevant字母开头的组列表被显示。

有人可以帮我吗？

在此先感谢...

Answer 1

它其实很简单，假设锚是LetterViewalphabetlist模板内：

var LetterView = Backbone.View.extend({ 
    template: 'alphabetlist', 
    tagName: 'li', 
    serialize: function() { 
     return this.model.toJSON(); 
    }, 
    events: { 
     'click a': 'onClick' 
    }, 
    onClick: function (e) { 
     e.preventDefault(); 
     this.$el.siblings('.is-active').removeClass('is-active'); 
     this.$el.addClass('is-active'); 
    } 
});