3

私は次の機能に取り組んでいます。ユーザーがページ上の写真をクリックmodalViewすると、そのアイテムの詳細を示すモーダルが表示されます。modalViewで、ユーザーは別のアイテムの写真をクリックできます。これにより、最初のモーダルウィンドウが閉じ、この次のアイテムの完全な詳細を含むmodalView新しいモーダルウィンドウが開きます。modalViewの開閉はmodalViewルーター機能で行います。

（ユーザーにちらつきが発生する場合がありますが、それは別の問題です）

問題：modalViewユーザーが内の別のアイテムの写真をクリックするshowModal()と、現在のアイテムmodalViewが閉じられ、URLが次のアイテムのURLに更新されます/product/1234が、新しいアイテムmodalViewは表示されません。console.log()デバッグに使用すると、最初modalViewに閉じ、2番目に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メソッドが2回起動する理由がわかりません。コードから簡略化されたバージョンを作成し、メソッドは毎回1回だけ呼び出されました（もちろん、少し即興で作成したので、それと関係があります）。

毎回モーダルビューを閉じて再度開く代わりに、モデルを交換してみてください。

例えば

 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 に答える