单击菜单项以在Backbone View中突出显示

Question

对于初学者来说这是一个简单的问题,但到目前为止我还没有看到符合我需要的解决方案.基本上我有一个简单的菜单ul和li.有2个要求:

要求1:当点击一个时,li将获得新的课程.active.

要求2:菜单项是动态的,这意味着我应该能够添加或删除任何菜单项(通过使用其他按钮).

有两种方法可以做到这一点:

方法1:将每个MenuView作为MenuItem进行转换

我有一个类似这样的MenuView

el:  $('li'),

events: {
  "click" : "highlight"
},

highlight: function(e) {
  thisParent = $(e.target).parent();
  thisParent.siblings('.active').removeClass('active');
  thisParent.addClass('active');
},

亲:容易.这就是我现在拥有的.

Con:依赖于html结构.如果div改为使用多层,该怎么办？

方法2:MenuCollection的一个视图

创建一个MenuItemCollection并使用MenuView代替该集合.在el对MenuView将是ul(代替li).HTML将如下所示id:

<ul>
    <li id="leftmenu-one">one</li>
    <li id="leftmenu-two">two</li>
    <li id="leftmenu-three">three</li>
</ul>

然后,当检测到单击事件时,执行以下两项操作:

2A.删除所有.active课程ul li

2B.将.active类添加到e.targetDOM

专业:解耦html设计

骗局:多一点代码.

问题:我想大多数人会说方法1很糟糕.但是有方法3,4,5 ......哪个更好？如何处理添加新菜单项？

Answer 1

创建菜单项模型

    var MenuItem = Backbone.Model.extend({
        title: 'Default Title',
        isSelected: false
    });

和项目集合,将听取任何模型选择更改事件

   var MenuItemCollection = Backbone.Collection.extend({
        model: MenuItem,

        initialize: function() {
            this.on('change:isSelected', this.onSelectedChanged, this);
        },

        onSelectedChanged: function(model) {
            this.each(function(model) {
                if (model.get('isSelected') === true && !model.hasChanged('isSelected')) {
                    model.set({isSelected: false});
                }
            });
        }
    });

之后,为菜单项创建一个视图

   var MenuItemView = Backbone.View.extend({
        tagName:  'li',
        events: {
          'click' : 'highlight'
        },

        initialize: function() {
            _.bindAll(this);
            this.model.on('change:isSelected', this.onSelectedChanged);
        },

        render: function() {
            this.$el.text(this.model.get('title'));
            return this;
        },

        onSelectedChanged: function() {
            if (this.model.get('isSelected') === true) {
                this.$el.addClass('active');
            }
            else {
                this.$el.removeClass('active');
            }
        },

        highlight: function() {
            this.model.set({isSelected: true});
        }
    });

和菜单本身一样

   var MenuView = Backbone.View.extend({
        tagName:  'ul',

        initialize: function() {
            _.bindAll(this);
        },

        render: function() {
            this.collection.each(function(model) {
                var item = new MenuItemView({model: model});
                this.$el.append(item.render().el);
            }, this);

            return this;
        }
    });

完整的工作js在http://jsfiddle.net/Kf3SS/上提出评论