3

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

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

问题：当用户点击其中另一个项目的照片时modalView，showModal()会导致当前modalView关闭并且URL更新为下一个项目的URL /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
4

1 回答 1

0

根据您提供的代码，我不确定为什么您的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}) });
        }
    }
于 2012-09-06T03:27:04.020 回答