Question

我对javascript很新，并且有一个简单的页面，在右上角显示购物车摘要。

Before click

第一次单击更新按钮时，集合和视图会按预期更新。

After first click

但是，后续点击无效，控制台中没有错误。第一次点击后，事件处理似乎丢失了。

我注意到在SO上发布的其他类似问题，这些问题指向在调用.html（）之后在视图对象上调用delegateEvents的解决方案。我试过这个，但没有任何区别。

我的骨干观点是：

MyApp.View.Item = Backbone.View.extend({

    events: {
        'click #update-btn' : 'update',
        'click #reset-btn' : 'reset'
     }, 

     initialize: function(){
         console.log('item view initialize invoked');
         this.collection = new MyApp.Collection.Items();
         this.listenTo(this.collection, 'add', this.display);
         var source = $("#cart-template").html();
         this.template = Handlebars.compile(source);
     },

     render: function(){
         console.log('render invoked');
         var html = this.template(this.collection);
         this.$el.html(html);
         // this.delegateEvents(); <-- Tried this
         return this;
    },

    display: function() {
        $('#cart-summary').html(this.render().el);
    },

    update: function(e) { 
        console.log('update invoked');
        e.preventDefault();
        var newItem = new MyApp.Model.Item();
        newItem.setName('blah');
        newItem.setPrice(20);
        this.collection.addItem(newItem);
    },  

    reset: function(e) { 
        console.log('reset invoked');
        e.preventDefault();
    }
});

我的收藏是

MyApp.Collection.Items = Backbone.Collection.extend({

    initialize: function(){
        this.items = 0;
        this.total = 0;
    },

    addItem: function(item) {
        console.log('addItem invoked');
        this.items++;
        this.total += item.getPrice();
        this.trigger('add');
   }

});

我使用的是主干1.1.2，jquery 2.1.1和Chrome 35.0.1916.153。

提前致谢。

Answer 1

首先，在创建视图时，应将el设置为＃chart-summary。

MyApp.View.Item = Backbone.View.extend({

    el: '#cart-summary'

    (your other stuff)
});

并尝试更改显示功能，如下所示

display: function() {
    this.render();
},

Answer 2

教程示例http://backbonetutorials.com/what-is-a-view/使用以下行创建新视图：

var view = new MyApp.View.Item（{el：$（“＃'div container id，其中包含按钮视图'”）}）;

我认为它提供了一个刷新的视图，按钮将在单击时起作用。我认为它应该是您骨干视图中的最后一行代码。也许你已经这样做了，但我在你的代码中没有看到它..

首次单击后，骨干视图事件处理丢失

2 个答案: