Question

我想将BackboneJS用于单页网站。我正在考虑使用的结构有div#pageWrapper用于将视图加载到

中

# a simple example view
class View1 extends Backbone.View
    render: ->
        @$el.html @template()


class AppRouter extends Backbone.Router
    routes:
        "": "home"
        "view1": "view1"
        "view2": "view2"

    home: ->
        # init, render, attach to body. repeat for other controller actions
        view = new HomeView()
        view.render()
        $("#pageWrapper").html view.el

这是通常的做法吗？或者是否有某种设计模式可用？我没有处理清理，我需要它吗？或者是简单地替换页面包装器的html的副作用？

Answer 1

是的，您肯定需要处理关闭视图并正确删除它们。如果你不这样做，你最终会得到内存泄漏和“僵尸”视图 - 这些视图应该是死的，但不是。

我已经广泛地写了这篇文章：

http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/

http://lostechies.com/derickbailey/2011/12/12/composite-js-apps-regions-and-region-managers/

它的要点是您应该直接在视图中管理清理视图，然后使用标准化过程来调用视图的清理方法。

例如，我使用一个对象在屏幕上显示/删除/替换我的视图：


Region = (function (Backbone, $) {
    var currentView;
    var el = "#mainregion";
    var region = {};

    var closeView = function (view) {
        if (view && view.close) {
            view.close();
        }
    };

    var openView = function (view) {
        view.render();
        $(el).html(view.el);
        if (view.onShow) {
            view.onShow();
        }
    };

    region.show = function (view) {
        closeView(currentView);
        currentView = view;
        openView(currentView);
    };

    return region;
})(Backbone, jQuery);

请确保您的视图中包含close方法，此代码将为您清理它。一个简单的close实现看起来像这样：


Backbone.View.prototype.close = function(){
  this.remove();
  this.unbind();
  if (this.onClose){
    this.onClose();
  }
}

现在你所有的观点都有这种贴近的方法。

有关详细信息，请参阅文章。

Answer 2

是的，执行单页网站的常用方法是使用一些html元素，在其中呈现要在任何给定时刻显示的页面。

至于清理。您应该清除容器元素，并在要清理的每个View中，您应该解除与该视图相关的所有事件的绑定，如果您正在使用例如ModelBinding，那么您也应该取消绑定。所以基本上

清理所有子视图 - ＆gt;关于此观点的解除绑定事件 - ＆gt;明确html

处理清理非常重要，可以避免让鬼视图和事件搞乱。

BackboneJS单页站点：附加和清理视图

2 个答案: