rewrote a bit of the code so that templates.js is called asynchronously, and moved indentation levels to CSS instead of inlined styling.

public/less/admin/manage/categories.less

@@ -1,9 +1,14 @@
 div.categories {
 
   ul {
+    .no-select;
     list-style-type: none;
     margin: 0;
     padding: 0;
+
+    > li > ul > li {
+      margin-left: 4.5rem;
+    }
   }
 
   .fa-ul {

public/src/admin/manage/categories.js

@@ -1,13 +1,10 @@
 "use strict";
-/*global define, socket, app, bootbox, templates, ajaxify, RELATIVE_PATH*/
+/*global define, socket, app, bootbox, templates, ajaxify, RELATIVE_PATH, Sortable */
 
 define('admin/manage/categories', function() {
 	var	Categories = {}, newCategoryId = -1, sortables, itemTemplate;
 
 	Categories.init = function() {
-		$.get(RELATIVE_PATH + '/templates/admin/partials/categories/category-item.tpl', function(data){
-			itemTemplate = data;
-
 		socket.emit('admin.categories.getAll', function(error, payload){
 			if(error){
 				return app.alertError(error.message);
@@ -15,9 +12,18 @@ define('admin/manage/categories', function() {
 
 			Categories.render(payload);
 		});
-		});
 
 		$('button[data-action="create"]').on('click', Categories.create);
+
+		// Enable/Disable toggle events
+		$('.categories').on('click', 'button[data-action="toggle"]', function() {
+			var self = $(this),
+				rowEl = self.parents('li'),
+				cid = rowEl.attr('data-cid'),
+				disabled = rowEl.hasClass('disabled');
+
+			Categories.toggle(cid, disabled);
+		});
 	};
 
 	Categories.create = function() {
@@ -58,10 +64,26 @@ define('admin/manage/categories', function() {
                 .appendTo(container);
         }else{
             sortables = {};
-            renderList(categories, 0, container, 0);
+            renderList(categories, container, 0);
         }
 	};
 
+	Categories.toggle = function(cid, state) {
+		var payload = {};
+
+		payload[cid] = {
+			disabled: !state | 0
+		};
+
+		socket.emit('admin.categories.update', payload, function(err, result) {
+			if (err) {
+				return app.alertError(err.message);
+			} else {
+				ajaxify.refresh();
+			}
+		});
+	}
+
 	function itemDidAdd(e){
         newCategoryId = e.to.dataset.cid;
 	}
@@ -96,32 +118,22 @@ define('admin/manage/categories', function() {
      * @param container {object} parent jquery element for the list
      * @param parentId {number} parent category identifier
      */
-    function renderList(categories, level, container, parentId){
+    function renderList(categories, container, parentId){
-        var i = 0, len = categories.length, category, marginLeft = 48, listItem;
+		templates.parse('admin/partials/categories/category-rows', {
-        var list = $('<ul />', {'data-cid': parentId});
+			cid: parentId,
+			categories: categories
+		}, function(html) {
+			container.append(html);
 
-		if(level > 0){
+			// Handle and children categories in this level have
-			list.css('margin-left', marginLeft);
+			for(var x=0,numCategories=categories.length;x<numCategories;x++) {
-		}
+				if (categories[x].hasOwnProperty('children') && categories[x].children.length > 0) {
-
+					renderList(categories[x].children, $('li[data-cid="' + categories[x].cid + '"]'), categories[x].cid);
-        for(i; i < len; ++i){
-            category = categories[i];
-
-             listItem = $('<li></li>', {'data-cid': category.cid})
-                 .append(renderListItem(category))
-                 .appendTo(list);
-
-            if(category.disabled){
-                listItem.addClass('disabled');
-            }
-
-            if(category.children.length > 0){
-                renderList(category.children, level + 1, listItem, category.cid);
 				}
 			}
 
-        list.appendTo(container);
+			// Make list sortable
-		sortables[parentId] = Sortable.create(list[0], {
+			sortables[parentId] = Sortable.create($('ul[data-cid="' + parentId + '"]')[0], {
 				group: 'cross-categories',
 				animation: 150,
 				handle: '.icon',
@@ -130,49 +142,7 @@ define('admin/manage/categories', function() {
 				onAdd: itemDidAdd,
 				onEnd: itemDragDidEnd
 			});
-    }
-
-    function renderListItem(categoryEntity){
-        var listItem = $(templates.parse(
-			itemTemplate,
-            categoryEntity
-        ));
-
-		var icon = listItem.find('.icon'),
-			button = listItem.find('[data-action="toggle"]');
-
-		if(categoryEntity.backgroundImage){
-			icon.css('background-image', 'url(' + categoryEntity.backgroundImage + ')');
-		}
-
-		icon
-			.css('color', categoryEntity.color)
-			.css('background-color', categoryEntity.bgColor);
-
-		if(categoryEntity.disabled){
-			button.text('Enable').addClass('btn-success');
-		}else{
-			button.text('Disable').addClass('btn-danger');
-		}
-
-		// Category enable/disable
-		button.on('click', function(e) {
-			var payload = {};
-
-			payload[categoryEntity.cid] = {
-				disabled: !categoryEntity.disabled | 0
-			};
-
-			socket.emit('admin.categories.update', payload, function(err, result) {
-				if (err) {
-					return app.alertError(err.message);
-				} else {
-					ajaxify.refresh();
-				}
 		});
-		});
-
-        return listItem;
     }
 
 	return Categories;

src/views/admin/partials/categories/category-item.tpl

@@ -1,26 +0,0 @@
-<div class="row">
-    <div class="col-md-9">
-        <div class="clearfix">
-            <div class="icon">
-                <i data-name="icon" value="{icon}" class="fa {icon}"></i>
-            </div>
-            <div class="information">
-                <h5 class="header">{name}</h5>
-
-                <p class="description">{description}</p>
-            </div>
-        </div>
-    </div>
-    <div class="col-md-3">
-        <div class="clearfix pull-right">
-            <ul class="fa-ul stats">
-                <li class="fa-li"><i class="fa fa-book"></i> {topic_count}</li>
-                <li class="fa-li"><i class="fa fa-pencil"></i> {post_count}</li>
-            </ul>
-            <div class="btn-group">
-                <button data-action="toggle" data-disabled="{disabled}" class="btn btn-xs"></button>
-                <a href="./categories/{cid}" class="btn btn-default btn-xs">Edit</a>
-            </div>
-        </div>
-    </div>
-</div>

src/views/admin/partials/categories/category-rows.tpl

@@ -0,0 +1,33 @@
+<ul data-cid="{cid}">
+<!-- BEGIN categories -->
+    <li data-cid="{categories.cid}" <!-- IF categories.disabled -->class="disabled"<!-- ENDIF categories.disabled -->>
+        <div class="row">
+            <div class="col-md-9">
+                <div class="clearfix">
+                    <div class="icon" style="color: {categories.color}; background-color: {categories.bgColor};<!-- IF categories.backgroundImage --> background-image: url('{categories.backgroundImage}');<!-- ENDIF categories.backgroundImage -->">
+                        <i data-name="icon" value="{categories.icon}" class="fa {categories.icon}"></i>
+                    </div>
+                    <div class="information">
+                        <h5 class="header">{categories.name}</h5>
+                        <p class="description">{categories.description}</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-md-3">
+                <div class="clearfix pull-right">
+                    <ul class="fa-ul stats">
+                        <li class="fa-li"><i class="fa fa-book"></i> {categories.topic_count}</li>
+                        <li class="fa-li"><i class="fa fa-pencil"></i> {categories.post_count}</li>
+                    </ul>
+                    <div class="btn-group">
+                        <button data-action="toggle" data-disabled="{categories.disabled}" class="btn btn-xs <!-- IF categories.disabled -->btn-primary<!-- ELSE -->btn-danger<!-- ENDIF categories.disabled -->">
+                            <!-- IF categories.disabled -->Enable<!-- ELSE -->Disable<!-- ENDIF categories.disabled -->
+                        </button>
+                        <a href="./categories/{categories.cid}" class="btn btn-default btn-xs">Edit</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </li>
+<!-- END categories -->
+</ul>