我正在第一次构建一个 Backbone 应用程序--它进行得很好。
然而，我认为我没有以正确的方式为我的模型集合创建视图，当我绑定事件时，它们为每个视图触发，而我只希望它们为一个视图触发。
下面是我的 Backbone.js 代码（一个片段）：

(function(){

        Series = Backbone.Model.extend({
            defaults:{
                active:false
            }
        });

        SeriesGridItemView = Backbone.View.extend({
            el:'#model-grid',
            defaults: {
                active : false
            },
            initialize: function(){
                this.render();
                this.listenTo(this.model, 'change', this.setState);
            },
            render: function(){
                this.template = _.template( $('#template-model-grid-item-view').html() );
                this.view = $(this.template(this.model.toJSON())).appendTo(this.$el);
            },
            setState: function(){
                this.active = this.model.get('active');
                this.view.toggleClass('active',this.active);
            },
            events: {
                'click':'toggle'
            },
            toggle: function(e){
                e.stopPropagation();
                e.preventDefault();
                console.log('clicked');
                return false;
            }

        });

        SeriesCollection = Backbone.Collection.extend({
            model: Series,
            setPrice : function(p){
                this.forEach(function(m){
                    var active = 0;
                    _.each(m.get('vehicles'),function(v){
                        if(v.price <=p){
                            v.active = true;
                            active++;
                        }
                        else{
                            v.active = false;
                        }
                    });
                    m.set('active',active>0);
                });
            }
        });

        series = new SeriesCollection(window.BMW.data.series);
        series.forEach(function(m,i){
            var c = i+1;
            if(c > 3){
                c%=3;
            }
            m.set('column','1');
            new SeriesGridItemView({model:m});
        });
    })();

下面是构造模型的JSON：

window.BMW.data.series = [
    {
        seriesId:1,
        name:'1 Series',
        slug:'1-series',
        order:0,
        vehicles:[
            {
                seriesId:1,
                price:200
            },
            {
                seriesId:2,
                price:300
            }
        ]
    },
    {
        seriesId:2,
        name:'3 Series',
        slug:'3-series',
        order:1,
        vehicles:[
            {
                seriesId:1,
                price:400
            },
            {
                seriesId:2,
                price:500
            }
        ]
    },
    {
        seriesId:3,
        name:'4 Series',
        slug:'4-series',
        order:3,
        vehicles:[
            {
                seriesId:1,
                price:100
            },
            {
                seriesId:2,
                price:300
            }
        ]
    },
    {
        seriesId:4,
        name:'6 Series',
        slug:'6-series',
        order:4,
        vehicles:[
            {
                seriesId:1,
                price:100
            },
            {
                seriesId:2,
                price:300
            }
        ]
    },
    {
        seriesId:6,
        name:'X3',
        slug:'x3',
        order:5,
        vehicles:[
            {
                seriesId:1,
                price:500
            },
            {
                seriesId:2,
                price:800
            }
        ]
    }
];

这是我的视图模板

<script type="text/template" id="template-model-grid-item-view">
    <div id="series-<%=seriesId%>" class="grid-item-view column-<%=column%>">
        <div class="label"><%= name %></div>
        <div class="thumbnail">
            <img src="/Content/themes/BMW/img/series/small/<%= slug %>.png"/>
        </div>
    </div>
</script>

视图组合正确，但当我单击一个视图时，事件在所有视图上触发。有人能给我指出正确的方向吗？