Question

我最近使用backbone.js编写了一个城市选择组件演示。 window.CityModalView事件（“click span.confirm”：'confirm'）失败。但window.CityView事件（“click span.confirm2”：'confirm'）有效。谁能告诉我我的代码有什么问题以及如何修复它？非常感谢你。

代码在jsfiddle中：http://jsfiddle.net/40phzeqd/

<script>
window.CityModalView = Backbone.View.extend({
    tagName:"table",

    initialize:function () {
        var self = this;
        _.bindAll(this, 'render', 'confirm', 'cancel');
        this.render();

    },

    template: _.template('<div>City Modal</div><div class="modal-content"></div><div class="operator"><span class="confirm">YES</span><span class="cancel">NO</span></div>'),

    events: {
        "click span.confirm": 'confirm',
        "click span.cancel": 'cancel'
    },

    render:function () {
        this.$el.html(this.template());
        return this;
    },

    confirm: function() {
        console.log('YES');
    },

    cancel: function() {
        console.log('NO');
    }


});

window.CityView = Backbone.View.extend({
    tagName:'div',

    events: {
        'click span.add-city': 'addCity',
        "click span.confirm2": 'confirm',
        "click span.cancel2": 'cancel'
    },

    initialize:function () {
        var self = this
        _.bindAll(this, 'render', 'appendItem', 'addCity','confirm', 'cancel');

        this.cityModalView = new CityModalView();
        this.render();
    },

    template: _.template('<div>City List</div><span class="city-selected"></span><span class="add-city">+SET CITY</span><div class="operator"><span class="confirm2">yes</span><span class="cancel2">no</span></div><div class="city-modal-sec hide"></div>'),

    render:function () {
        var self = this;
        this.$el.html(this.template());
        $('.city-modal-sec', this.el).append(this.cityModalView.render().el);
        return this;
    },

    appendItem: function(item){
        var itemView = new CityItemView({
            model: item
        });
        $('.city-selected', this.el).append(itemView.render().el);
    },

    addCity: function(){
        $('.city-modal-sec').removeClass('hide')
    },

    confirm: function() {
        console.log('confirm');
    },

    cancel: function() {
        console.log('cancel');
    }

});

window.HomeView = Backbone.View.extend({
    el: $('body'),

    initialize:function () {
        console.log('Initializing Home View');
        this.cityView = new CityView();
        this.render();
    },

    template: _.template('<div class="city-sec"></div>'),

    render:function () {
        $(this.el).html(this.template());
        $('.city-sec', this.el).append(this.cityView.render().el);
        return this;
    }

});

var homeView = new HomeView();

Answer 1

正如@muistooshort指出的那样，如果你没有理由缓存你的观点，你可能最好根据需要创建它们并在完成它们时摧毁它们。在这种情况下，您将在 cityView 中创建对 cityModalView 的引用，然后呈现 cityView ，这似乎正在摧毁 cityModalViews 绑定事件。

要解决此问题，您可以在渲染cityView后实例化cityModalView

this.cityModalView = new window.CityModalView();
this.$('.city-modal-sec').append(this.cityModalView.render().el);

或者，您可以在渲染视图后重新delegate您的活动

render:function () {
    this.$el.html(this.template());
    this.$('.city-modal-sec').append(this.cityModalView.render().el);
    this.cityModalView.delegateEvents();
    return this;
},

jsFiddle

除此之外，您可以通过使用jQuery选择器函数this.$和缓存的jQuery对象（例如el this.$el）来清理您的视图。在您的情况下，您的事件和函数已经绑定到您的视图，因此没有任何理由可以调用_.bind()和self = this。

为什么backbone.js事件不起作用

1 个答案: