I’ve extended Backbone’s View prototype to include a “close” function in order to “kill the zombies”, a technique I learned from Derrick Bailey’s blog<\/p>\n
The code looks like this:<\/p>\n
Backbone.View.prototype.close = function () {\n this.remove();\n this.unbind();\n if (this.onClose) {\n this.onClose();\n }\n};\n<\/code><\/pre>\nThen I have a Router that looks (mostly) like this:<\/p>\n
AppRouter = Backbone.Router.extend({\n\n initialize: function() {\n this.routesHit = 0;\n \/\/keep count of number of routes handled by your application\n Backbone.history.on('route', function () { this.routesHit++; }, this);\n },\n\n back: function () {\n if(this.routesHit > 1) {\n \/\/more than one route hit -> user did not land to current page directly\n logDebug(\"going window.back\");\n window.history.back();\n } else {\n \/\/otherwise go to the home page. Use replaceState if available so\n \/\/the navigation doesn't create an extra history entry\n this.navigate('\/', {trigger:true, replace:true});\n }\n },\n\n routes: {\n \"\": \"showLoginView\",\n \"login\": \"showLoginView\",\n \"signUp\": \"showSignUpView\"\n },\n\n showLoginView: function () {\n view = new LoginView();\n this.render(view);\n },\n\n showSignUpView: function () {\n view = new SignUpView();\n this.render(view);\n },\n\n render: function (view) {\n if (this.currentView) {\n this.currentView.close();\n }\n view.render();\n this.currentView = view;\n return this;\n }\n});\n<\/code><\/pre>\nThe render function of my LoginView looks like this:<\/p>\n
render: function () {\n $(\"#content\").html(this.$el.html(_.template($(\"#login-template\").html())));\n this.delegateEvents();\n return this;\n }\n<\/code><\/pre>\nThe first time the LoginView is rendered, it works great. But if I render a different view (thereby calling “close” on my LoginView) and then try to go back to my LoginView, I get a blank screen. I know for a fact that the render on my LoginView fires the second time, but it seems that my “close” method is causing a problem. Any ideas?<\/p>\n
EDIT<\/strong> After some feedback from Rayweb_on, it appears I should add more detail and clarify.<\/p>\nMy HTML looks like this:<\/p>\n
this is my header\nI want my view to render in here\nthis is my footer\n<\/code><\/pre>\nThen I have a login-template that looks like this (sort of):<\/p>\n
\n \n \n ...\n \n \n\n<\/code><\/pre>\nI’m trying to get it so that the view always renders inside of that “content” div, but it appears that the call to “close” effectively removes the “content” div from the DOM. Hence the “blank” page. Any ideas?<\/p>\n
EDIT 2<\/strong> Here’s what my LoginView looks like, after some noodling:<\/p>\nLoginView = Backbone.View.extend({\n events: {\n \"vclick #login-button\": \"logIn\"\n },\n\n el: \"#content\",\n\n initialize: function () {\n _.bindAll(this, \"logIn\");\n },\n\n logIn: function (e) {\n ...\n },\n\n\n render: function () {\n this.$el.html(_.template($(\"#login-template\").html()));\n this.delegateEvents();\n return this;\n }\n\n});\n<\/code><\/pre>\nI set the el to “#content” in the hopes that it would get recreated. But still no luck. In fact, now when I go to the next page it’s not there because #content is being removed right away.<\/p>\n
I also tried:<\/p>\n
LoginView = Backbone.View.extend({\n events: {\n \"vclick #login-button\": \"logIn\"\n },\n\n el: \"#login-template\",\n\n initialize: function () {\n _.bindAll(this, \"logIn\");\n },\n\n logIn: function (e) {\n ...\n },\n\n\n render: function () {\n this.$el.html(_.template($(\"#login-template\").html()));\n this.delegateEvents();\n return this;\n }\n\n});\n<\/code><\/pre>\nBut that doesn’t work at all. Any ideas?<\/p>\n
\n- \n
It would appear that any elements included in the view get destroyed (or at least removed from the DOM) by my “close” function (thanks Rayweb_on!). So, if I reference the #content div in my view, I lose it after the view is closed. Therefore, I no longer reference #content anywhere in my view. Instead, I add my view’s default “el” to my #content element externally of my view.<\/p>\n
In my case, I chose to do it in my router. The result looks like this:<\/p>\n
ROUTER<\/strong><\/p>\n AppRouter = Backbone.Router.extend({\n\n initialize: function() {\n ...\n },\n\n routes: {\n \"\" : \"showLoginView\",\n \"login\": \"showLoginView\",\n \"signUp\": \"showSignUpView\",\n },\n\n showLoginView: function () {\n view = new LoginView();\n this.render(view);\n },\n\n showSignUpView: function () {\n view = new SignUpView();\n this.render(view);\n },\n\n render: function (view)\n {\n if (currentView)\n {\n currentView.close();\n }\n $(\"#content\").html(view.render().el);\n currentView = view;\n return this;\n }\n\n});\n<\/code><\/pre>\nLOGIN VIEW<\/strong><\/p>\n LoginView = Backbone.View.extend({\n events: {\n \"vclick #login-button\": \"logIn\"\n },\n\n initialize: function () {\n _.bindAll(this, \"logIn\");\n },\n\n logIn: function (e) {\n ...\n },\n\n render: function () {\n this.$el.html(_.template($(\"#login-template\").html()));\n this.delegateEvents();\n return this;\n }\n\n});\n<\/code><\/pre>\nThis all works swimingly, but I am not certain it’s the best solution. I’m not even certain it’s a good solution, but it’ll get me moving for now. I’m certainly open to other options.<\/p>\n
====<\/p>\n
EDIT:<\/strong> Found a slightly cleaner solution.<\/p>\nI wrote a function called injectView that looks like this:<\/p>\n
function injectView(view, targetSelector) {\n if (_.isNull(targetSelector)) {\n targetSelector = \"#content\";\n }\n $(targetSelector).html(view.el);\n}\n<\/code><\/pre>\nand I call it from each View’s render function, like this:<\/p>\n
render: function () {\n this.$el.html(_.template($(\"#login-template\").html()));\n this.delegateEvents();\n injectView(this,\"#content\")\n return this;\n }\n<\/code><\/pre>\nIt works. I don’t know how good it is. But it works.<\/p>\n<\/li>\n
- \n
When you remove your view the first time you are removing its el, so this line<\/p>\n
$(\"#content\").html(this.$el.html(_.template($(\"#login-template\").html())));\n<\/code><\/pre>\non your render function wont work. as this.$el. its undefined.<\/p>\n<\/li>\n<\/ol>\n
Originally posted 2013-11-09 21:40:15. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
I’ve extended Backbone’s View prototype to include a “close” function in order to “kill the zombies”, a technique I learned from Derrick Bailey’s blog The code looks like this: Backbone.View.prototype.close = function () { this.remove(); this.unbind(); if (this.onClose) { this.onClose(); } }; Then I have a Router that looks (mostly) like this: AppRouter = Backbone.Router.extend({ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-699","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/699","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=699"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/699\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}