javascript - 返回模块时 Backbone Marionette 布局区域未关闭

Question

我有一个 Backbone Marionette 应用程序，其布局区域无法正常工作。我的应用程序是使用 Require 模块构建的，当模块第二次返回时，其中一些模块的区域无法自行关闭。第一次访问时，区域按预期关闭，但返回后，布局对象不再包含第一次访问期间的区域对象:我正在使用浏览器调试器来确定此差异。

这是我的模块代码:-

define(["marionette", "shell/shellapp", "interaction/videoreveal/model", "interaction/videoreveal/controller", "utils/loadingview", "utils/imagepreloader"], function(Marionette, shellApp, Model, Controller, LoadingView, imagePreloader){
    var currentModuleModel = shellApp.model.get("currentInteractionModel");                      // get module name from menu model
    var Module = shellApp.module(currentModuleModel.get("moduleName"));           // set application module name from menu model

    Module.init = function() {                                                    // init function called by shell
        //trace("Module.init()");
        Module.model = new Model(shellApp.interactionModuleData);             // pass in loaded data
        Module.controller = new Controller({model: Module.model, mainRegion:shellApp.mainRegion});             // pass in loaded data and region for layout
        Module.initMain();
    };

    Module.initMain = function() {
        trace("Module.initMain()");
        shellApp.mainRegion.show(new LoadingView());

        // do some preloading
        var imageURLs = this.model.get('imagesToLoad');
        imagePreloader.preload(imageURLs, this.show, this);


    };

    Module.show = function() {
        Module.controller.show();
    };

    Module.addInitializer(function(){
        //trace("Module.addInitializer()");

    });
    Module.addFinalizer(function(){
        //trace("Module.addFinalizer()");
    });

    return Module;
});

这是处理布局和 View 的 Controller 类:-

define(["marionette", "shell/vent", "shell/shellapp", "interaction/videoreveal/layout", "interaction/videoreveal/views/mainview", "ui/feedbackview", "ui/videoview"], function(Marionette, vent, shellApp, Layout, MainView, FeedbackView, VideoView){

    return Marionette.Controller.extend({
        initialize: function(options){
            trace("controller.initialize()");
            // store a region that will be used to show the stuff rendered by this component
            this.mainRegion = options.mainRegion;
            this.model = options.model;
            this.model.on("model:updated", this.onModelUpdate, this);
            this.layout = new Layout();
            this.layout.render();
            this.mainView = new MainView({model:this.model, controller:this});
            this.feedbackView = new FeedbackView({feedbackBoxID:"vrFeedbackBox"});
            this.videoView = new VideoView({videoContainerID:"vrVideoPlayer"});
            vent.on("feedbackview:buttonclicked", this.onFeedbackClick, this);
            vent.on("videoview:buttonclicked", this.onVideoClick, this);
        },
        // call the "show" method to get this thing on screen
        show: function(){
            // get the layout and show it
            this.mainRegion.show(this.layout);
            this.model.initInteraction();
        },
        initFeedback: function (index) {
            this.model.set("currentItem", this.model.itemCollection.models[index]);
            this.model.set("itemIndex", index);
            this.model.initFeedback();
        },
        initVideo: function (index) {
            this.model.set("currentItem", this.model.itemCollection.models[index]);
            this.model.set("itemIndex", index);
            this.model.initVideo();
        },
        finalizer: function() {
            this.layout.close();
        },
        // events

        onFeedbackClick: function(e) {
            this.layout.overlayRegion.close();
        },
        onVideoClick: function(e) {
            this.layout.overlayRegion.close();
        },
        onFinishClick: function() {
            this.model.endInteraction();
        },
        onFeedbackClosed: function() {
            this.layout.overlayRegion.off("close", this.onFeedbackClosed, this);
            if (this.model.get("currentItem").get("correct") === true) {
                this.model.initThumb();
            }
        },
        onModelUpdate: function() {
            trace("controller onModelUpdate()");
            switch (this.model.get("mode")) {
                case "initInteraction":
                    this.layout.mainRegion.show(this.mainView);
                    break;
                case "initFeedback":
                    this.layout.overlayRegion.on("close", this.onFeedbackClosed, this);
                    this.feedbackView = new FeedbackView({feedbackBoxID:"vrFeedbackBox"})
                    this.feedbackView.setContent(this.model.get("currentItem").get("feedback"));
                    this.layout.overlayRegion.show(this.feedbackView    );
                    break;
                case "initVideo":

                    this.layout.overlayRegion.show(new VideoView({videoContainerID:"vrVideoPlayer"}));
                    break;


                case "interactionComplete":
                    vent.trigger('interactionmodule:completed', this);
                    vent.trigger('interactionmodule:ended', this);
                    break;
            }
        }
    });
});

这是 FeedbackView 类:-

define(['marionette', 'tweenmax', 'text!templates/ui/feedbackWithScrim.html', 'shell/vent'], function (Marionette, TweenMax, text, vent) {
    return Marionette.ItemView.extend({
        template: text,
        initialize: function (options) {
            this.model = options.model;
            this.content = options.content;                 // content to add to box
            this.feedbackBoxID = options.feedbackBoxID;     // id to add to feedback box
            this.hideScrim = options.hideScrim;             // option to fully hide scrim

        },
        ui: {
            feedbackBox: '.feedbackBox',
            scrimBackground: '.scrimBackground'
        },
        events : {
            'click button': 'onButtonClick'                 // any button events within scope will be caught and then relayed out using the vent

        },
        setContent: function(content) {
            this.content = content;

        },

        // events
        onRender: function () {
            this.ui.feedbackBox.attr("id", this.feedbackBoxID);
            this.ui.feedbackBox.html(this.content);
            if (this.hideScrim) this.ui.scrimBackground.css("display", "none");
            this.$el.css('visibility', 'hidden');
            var tween;
            tween = new TweenMax.to(this.$el,0.5,{autoAlpha:1});


        },

        onButtonClick: function(e) {
            trace("onButtonClick(): "+ e.target.id);
            vent.trigger("feedbackview:buttonclicked", e.target.id)         // listen to this to catch any button events you want
        },


        onShow : function(evt) {
            this.delegateEvents();      // when rerendering an existing view the events get lost in this instance. This fixes it.
        }


    });
});

知道为什么模块重新启动时该区域没有保留在布局中，或者我可以采取什么措施来纠正这个问题？

非常感谢

山姆

Answer 1

好吧......经过多次调试我最终到达了那里。如果没有其他人在这个帖子上的慷慨帮助，我根本不可能到达那里，所以谢谢!

Chris Camaratta 的解决方案无疑将我推向了正确的方向。我在我的 Controller 类中得到了一个僵尸布局 View 。我决定将我的很多 on 监听器切换为 ListenTo 监听器，以使它们的解耦和解除绑定(bind)更简单，并且希望更有效。但关键的变化是触发 Controller 类的 close 方法。我本来应该一直发生这种情况，但老实说，这是我第一次陷入这种困惑，而且以前一直有效，不需要这样做。无论如何，希望能吸取教训。 Marionette 为您完成了关闭、解除绑定(bind)和处理所有这些事情的出色工作，但它并不能完成所有工作，其余的都是您的责任。以下是对 Module 类的关键修改:-

    Module.addFinalizer(function(){
        trace("Module.addFinalizer()");
        Module.controller.close();
    });

这是我更新的 Controller 类:-

    define(["marionette", "shell/vent", "shell/shellapp", "interaction/videoreveal/layout", "interaction/videoreveal/views/mainview", "ui/feedbackview", "ui/videoview"], function(Marionette, vent, shellApp, Layout, MainView, FeedbackView, VideoView){

    return Marionette.Controller.extend({
        initialize: function(options){
            trace("controller.initialize()");
            // store a region that will be used to show the stuff rendered by this component
            this.mainRegion = options.mainRegion;
            this.model = options.model;
            this.listenTo(this.model, "model:updated", this.onModelUpdate);
            this.listenTo(vent, "feedbackview:buttonclicked", this.onFeedbackClick);
            this.listenTo(vent, "videoview:buttonclicked", this.onVideoClick);
        },
        // call the "show" method to get this thing on screen
        show: function(){
            // get the layout and show it
            // defensive measure - ensure we have a layout before axing it
            if (this.layout) {
                this.layout.close();
            }
            this.layout = new Layout();
            this.mainRegion.show(this.layout);
            this.model.initInteraction();
        },
        initFeedback: function (index) {
            this.model.set("currentItem", this.model.itemCollection.models[index]);
            this.model.set("itemIndex", index);
            this.model.initFeedback();
        },
        initVideo: function (index) {
            this.model.set("currentItem", this.model.itemCollection.models[index]);
            this.model.set("itemIndex", index);
            this.model.initVideo();
        },
        onClose: function() {
            trace("controller onClose()");
            if (this.layout) {
                this.layout.close();
            }
        },
        // events
        onFeedbackClick: function(e) {
            this.layout.overlayRegion.close();
        },
        onVideoClick: function(e) {
            this.layout.overlayRegion.close();
        },
        onFinishClick: function() {
            this.model.endInteraction();
        },
        onFeedbackClosed: function() {
            if (this.model.get("currentItem").get("correct") === true) {
                this.model.initThumb();
            }
        },
        onModelUpdate: function() {
            trace("controller onModelUpdate()");
            switch (this.model.get("mode")) {
                case "initInteraction":
                    this.layout.mainRegion.show(new MainView({model:this.model, controller:this}));
                    break;
                case "initFeedback":
                    var feedbackView = new FeedbackView({feedbackBoxID:"vrFeedbackBox", controller:this});
                    feedbackView.setContent(this.model.get("currentItem").get("feedback"));
                    this.layout.overlayRegion.show(feedbackView);
                    this.listenTo(this.layout.overlayRegion, "close", this.onFeedbackClosed);
                    break;
                case "initVideo":
                    this.layout.overlayRegion.show(new VideoView({videoContainerID:"vrVideoPlayer"}));
                    break;
                case "interactionComplete":
                    vent.trigger('interactionmodule:completed', this);
                    vent.trigger('interactionmodule:ended', this);
                    break;
            }
        }
    });
});