Question

在单击相关<li>并显示视图后，是否可以向父<a href> - 元素添加一个类？我可以使用afterRender - 函数

吗？

我有这样的观点：

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> - 元素成为某种“活动”类，因此它表示已单击了哪个字母以及显示以rleevant字母开头的名称的组列表。< / p>

有人可以帮助我吗？

提前致谢...

Answer 1

实际上非常简单，假设锚点位于LetterView alphabetlist模板内：

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

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

1 个答案: