Question

大家好我是第一次建立一个骨干应用程序 - 它很棒！

但是，我并不认为我正在以正确的方式为我的模型集合创建视图，当我绑定事件时，当我只想让它们为一个视图开火时，它们会触发每个视图。

这是我的骨干代码（片段）：

        (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>

问题 - 视图正确汇编但当我点击一个视图时，事件会触发所有视图！有人可以指出我正确的方向吗？

谢谢，

杰克

Answer 1

由于您在视图的events对象中省略了选择器，因此以下适用

根据主干Documentation： Omitting the selector causes the event to be bound to the view's root element (this.el).

问题是SeriesGridItemView的每个click事件都绑定到#model-grid，每个视图都是#model-grid的子项。在您的示例中，您注册了5个单击事件，当您单击任何视图时，将触发所有5个事件。

在不更改任何其他代码的情况下，一种解决方案是设置events对象以返回一个函数，以便为每个视图指定id选择器。

events: function() {
  var selector = '#series-' + this.model.get('seriesId'); // this id corresponds to your template id
  var ev = {};
  ev['click ' + selector] = 'toggle';
  return ev;
},

另一个选项和我喜欢的选项是不指定#model-grid作为所有视图的根元素。它最终会像：demo

SeriesGridItemView = Backbone.View.extend({
  // remove the following line
  el:'#model-grid', 

  // .. all else is the same ../
});

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');
    $('#model-grid').append(new SeriesGridItemView({model:m}).el);
});

副作用

在render函数中，无需创建变量，您可以使用$访问您的元素：

render: function(){
  this.template = _.template( $('#template-model-grid-item-view').html() );
  this.$el.append(this.template(this.model.toJSON())));
},
setState: function(){
  this.active = this.model.get('active');
  this.$el.toggleClass('active',this.active);
},

Backbone DOM事件多次触发

1 个答案: