Backbone.Marionette擴展區域停止調用onClose（）函數

Question

我創建了Backbone，Marionette和Require.js應用程序，現在嘗試在區域之間添加平滑過渡。

為了輕松做到這一點，*我決定擴展木偶代碼，使其在我的所有頁面上都可以使用（其他頁面很多，因此手動進行操作會太多）

我擴展了marionette.region打開和關閉功能。 問題在於它現在不在我的每個視圖內調用onClose函數。

如果我直接將代碼添加到木偶文件中，則可以正常工作。 所以我可能不正確地合並了功能，對嗎？

這是我的代碼：

extendMarrionette: function () {
  _.extend(Marionette.Region.prototype, {

    open : function (view) {
      var that = this;

      // if this is the main content and should transition
      if (this.$el.attr("id") === "wrapper" && document.wrapperIsHidden === true) {
        this.$el.empty().append(view.el);
        $(document).trigger("WrapperContentChanged")

      } else if (this.$el.attr("id") === "wrapper" && document.wrapperIsHidden === false) {
        $(document).on("WrapperIsHidden:open", function () {

          //swap content
          that.$el.empty().append(view.el);

          //tell router to transition in
          $(document).trigger("WrapperContentChanged");

          //remove this event listener
          $(document).off("WrapperIsHidden:open", that);
        });

      } else {
        this.$el.empty().append(view.el);
      }

    },

    //A new function Ive added - was originally inside the close function below. Now the close function calls this function.
    kill : function (that) {
      var view = this.currentView;
      $(document).off("WrapperIsHidden:close", that)
      if (!view || view.isClosed) {
        return;
      }

      // call 'close' or 'remove', depending on which is found
      if (view.close) {
        view.close();
      }
      else if (view.remove) {
        view.remove();
      }

      Marionette.triggerMethod.call(that, "close", view);

      delete this.currentView;
    },

    // Close the current view, if there is one. If there is no
    // current view, it does nothing and returns immediately.
    close : function () {
      var view = this.currentView;
      var that = this;

      if (!view || view.isClosed) {
        return;
      }

      if (this.$el.attr("id") === "wrapper" && document.wrapperIsHidden === true) {
        this.kill(this);

      } else if (this.$el.attr("id") === "wrapper" && document.wrapperIsHidden === false) {

        //Browser bug fix - needs set time out
        setTimeout(function () {
          $(document).on("WrapperIsHidden:close", that.kill(that));
        }, 10)


      } else {
        this.kill(this);
      }

    }

  });
}

Answer 1

您為什么不擴展Marionette.Region？ 這樣一來，您就可以選擇使用自定義Region類，或者如果不需要在所有情況下都進行平滑過渡，則可以選擇原始類。 （如果您在某些特定情況下需要某些特定行為，則可以隨時再次對其進行擴展）。

https://github.com/marionettejs/backbone.marionette/blob/master/docs/marionette.region.md#region-class

var MyRegion = Marionette.Region.extend({
    open: function() {
        //Your open function
    }

    kill: function() {
        //Your kill function
    }

    close: function() {
        //Your close function
    }
});

App.addRegions({
    navigationRegion: MyRegion
});

Answer 2

也許您的問題是您沒有將函數傳遞給事件偵聽器，而是直接在下面的代碼中調用該代碼。

setTimeout(function(){
  $(document).on("WrapperIsHidden:close", that.kill(that));
}, 10)

您可能想要這樣的東西：

setTimeout(function(){
  $(document).on("WrapperIsHidden:close", function (){ that.kill(that); });
}, 10)

另一個可能的問題是，你是你的推薦混合達到this / that在你kill功能。 似乎您可能希望將var view分配給that.view或使用this而不是that整個方法中使用它。

回答您的其他問題：

您應該嘗試將close函數中的view變量直接傳遞到kill函數中，因為當您實際上想要舊的view對象時，對currentView的引用已經更改為新的view對象。 發生這種情況的原因是您在執行kill功能之前設置了超時。 如果查看show源代碼，則可以看到此內容。 它期望close ， open然后currentView分配按順序同步發生。