diff --git a/app/assets/javascripts/discourse/mixins/add-category-class.js.es6 b/app/assets/javascripts/discourse/mixins/add-category-class.js.es6
index fb9c504bf..80f5f96ac 100644
--- a/app/assets/javascripts/discourse/mixins/add-category-class.js.es6
+++ b/app/assets/javascripts/discourse/mixins/add-category-class.js.es6
@@ -1,21 +1,28 @@
 // Mix this in to a view that has a `categoryFullSlug` property to automatically
 // add it to the body as the view is entered / left / model is changed.
 // This is used for keeping the `body` style in sync for the background image.
+
+import Ember from "ember";
+const { on, observer } = Ember;
+
 export default {
-  _enterView: function() { this.get('categoryFullSlug'); }.on('init'),
+  _categoryChanged: on("didInsertElement", observer("categoryFullSlug", function() {
+    const categoryFullSlug = this.get("categoryFullSlug");
 
-  _removeClasses() {
-    $('body').removeClass((_, css) => (css.match(/\bcategory-\S+/g) || []).join(' '));
-  },
-
-  _categoryChanged: function() {
-    const categoryFullSlug = this.get('categoryFullSlug');
-    this._removeClasses();
+    this._removeClass();
 
     if (categoryFullSlug) {
-      $('body').addClass('category-' + categoryFullSlug);
+      $("body").addClass("category-" + categoryFullSlug);
     }
-  }.observes('categoryFullSlug').on('init'),
+  })),
 
-  _leaveView: function() { this._removeClasses(); }.on('willDestroyElement')
+  _leave: on("willDestroyElement", function() {
+    console.log("[" + this.get("elementId") + "] _leave");
+    this.removeObserver("categoryFullSlug");
+    this._removeClass();
+  }),
+
+  _removeClass() {
+    $("body").removeClass((_, css) => (css.match(/\bcategory-\S+/g) || []).join(" "));
+  },
 };