fix(Popup): fix memory leak due to detached DOM tree

gera2ld · gera2ld · commit f983ff5f2142 · 2016-06-07T22:12:44.000+08:00
diff --git a/src/popup/app.js b/src/popup/app.js
@@ -1,9 +1,10 @@
 define('app', function (require, exports, _module) {
-  var MenuView = require('views/Menu');
-  var CommandsView = require('views/Command');
   var models = require('models');
   var Menu = models.Menu;
   var MenuItem = models.MenuItem;
+  var MenuView = require('views/Menu');
+  var CommandsView = require('views/Command');
+  var cache = require('cache');
 
   var scriptsMenu = exports.scriptsMenu = new Menu;
   var commandsMenu = exports.commandsMenu = new Menu;
@@ -12,21 +13,23 @@ define('app', function (require, exports, _module) {
     hasCommands: false,
   });
 
-  var App = Backbone.Router.extend({
+  var App = cache.BaseRouter.extend({
     routes: {
       '': 'renderMenu',
       commands: 'renderCommands',
     },
     renderMenu: function () {
-      this.view && this.view.stopListening();
-      this.view = new MenuView;
+      this.loadView('menu', function () {
+        return new MenuView;
+      });
     },
     renderCommands: function () {
-      this.view && this.view.stopListening();
-      this.view = new CommandsView;
+      this.loadView('commands', function () {
+        return new CommandsView;
+      });
     },
   });
-  var app = new App();
+  var app = new App('#app');
   Backbone.history.start() || app.navigate('', {trigger: true, replace: true});
   exports.navigate = app.navigate.bind(app);
 
diff --git a/src/popup/index.html b/src/popup/index.html
@@ -13,7 +13,7 @@
     <script src="/cache.js"></script>
 	</head>
   <body>
-		<div id="popup"></div>
+		<div id="app"></div>
 		<script src="app.js"></script>
 	</body>
 </html>
diff --git a/src/popup/views/base.js b/src/popup/views/base.js
@@ -5,13 +5,13 @@ define('views/Base', function (require, _exports, module) {
   var MenuItem = models.MenuItem;
 
   module.exports = BaseView.extend({
-    el: '#popup',
     templateUrl: '/popup/templates/menu.html',
     addMenuItem: function (obj, parent, nextSibling) {
       if (!(obj instanceof MenuItem)) obj = new MenuItem(obj);
       var view = new MenuItemView({model: obj});
       if (nextSibling) view.$el.insertBefore(nextSibling);
       else parent.append(view.$el);
+      this.childViews.push(view);
       return view;
     },
   });
