Question

我正在处理以下功能：当用户点击页面上的照片时，会出现一个模式modalView，其中包含该项目的更多详细信息。在modalView中，用户可以点击另一个项目的照片，这将关闭第一个模态窗口modalView并打开一个新的模态窗口modalView，其中包含下一个项目的完整详细信息。 modalView的打开和关闭由路由器功能处理。

（用户可能会遇到闪烁，但这是另一个问题）

问题：当用户点击modalView中其他项目的照片时，showModal()会导致当前modalView关闭，并且网址会更新为下一项/product/1234的内容，但新的modalView没有出现！使用console.log()进行调试，我发现第一个modalView关闭，第二个modalView打开然后关闭！

发生了什么，以及如何解决这个问题？

路由器

var AppRouter = Backbone.Router.extend({
    routes: {,
        'product/:id': 'showModal'
    },


    showModal: function(id) {
        // Close any existing ModalView
        if(app.modalView) {
            app.modalView.closeModal();
            console.log('closing');
        }

        // Create new ModalView
        app.modalView = new ModalView({ model: new Product({id:id}) });
        console.log('creating new');
    }

});

app = new AppRouter();
Backbone.history.start({
    pushState: true,
    root: '/'
});

查看

ModalView = Backbone.View.extend({
    el: $('#modal'),

    template: _.template( $('#tpl_modal').html() ),

    events: {
        'click .more_photo': 'showModal',
    },

    initialize: function() {
        // Update Model with Full details
        var self = this;
        this.model.fetch({
            data: {post_id: self.model.get('id')},
            processData: true,
            success: function() {
                self.render();
        });
    },

    render: function() {
        $(this.el).show().append( this.template( this.model.toJSON( this.model ) ) );
    },

    closeModal: function() {
        // Restore scrollbars
        $(this.el).css('overflow-y', 'auto');
        $('body').removeClass('noscroll');

        // Close modal and remove contents
        $(this.el).fadeOut();
        $(this.el).empty();
    },

    showModal: function() {
        // Update URL & Trigger Router function `showModal`
        app.navigate('/product/' + this.model.get('id'), {trigger:true});
    }
});

Console.log输出

creating new
               <----clicks on another photo
closing
creating new

Answer 1

根据您提供的代码，我不确定为什么您的closeModal方法可能会触发两次，我已经创建了代码的简化版本，并且该方法每次只调用一次（当然我有点即兴创作，也许这与它有关。）

每次您可能想尝试交换模型时，可以选择关闭并重新打开模态视图。

例如

 showModal: function(id) {

        if(app.modalView) {
            app.modalView.model = new Product({id:id});
            app.modalView.model.fetch();
        } else {
           app.modalView = new ModalView({ model: new Product({id:id}) });
        }
    }

删除第一个视图并创建第二个视图（backbone.js）

1 个答案: