refactor topic list header to use a raw template

app/assets/javascripts/discourse/components/topic-list-header.js.es6

@@ -5,6 +5,8 @@ export default Ember.Component.extend(StringBuffer, {
 
   rerenderTriggers: ['order', 'ascending'],
 
+  rawTemplate: 'components/topic-list-header.raw',
+
   click: function(e) {
     var target = $(e.target);
 
@@ -18,52 +20,4 @@ export default Ember.Component.extend(StringBuffer, {
     }
 
   },
-
-  renderColumn: function(buffer, options){
-    var className = options.sortable ? "sortable " : "";
-    className += options.order || "";
-
-    var sortIcon = "";
-    if(this.get("order") === options.order && options.sortable){
-      className += " sorting";
-      sortIcon = " <i class='fa fa-chevron-" + (this.get('ascending') ? 'up' : 'down') +  "'></i>";
-    }
-
-    if(options.number){
-      className += " num";
-    }
-
-    var name = options.forceName || I18n.t(options.name);
-
-    buffer.push("<th data-sort-order='" + options.order + "' class='"+ className +"'>" + name + sortIcon + "</th>");
-  },
-
-  renderString: function(buffer){
-    var self = this;
-
-    if(this.get('currentUser')){
-      buffer.push("<th class='star'>");
-      if(this.get('canBulkSelect')){
-        var title = I18n.t('topics.bulk.toggle');
-        buffer.push("<button class='btn bulk-select' title='" + title + "'><i class='fa fa-list'></i></button>");
-      }
-      buffer.push("</th>");
-    }
-
-    var column = function(options){
-      self.renderColumn(buffer, options);
-    };
-
-    column({name: 'topic.title', sortable: false, order: 'default'});
-
-    if(!this.get('hideCategory')) {
-      column({name: 'category_title', sortable: true, order: 'category'});
-    }
-
-    column({sortable: false, order: 'posters', name: 'users'});
-    column({sortable: true, order: 'posts', name: 'posts', number: true});
-    column({sortable: true, order: 'views', name: 'views', number: true});
-    column({sortable: true, order: 'activity', name: 'activity', number: true});
-  }
-
 });

app/assets/javascripts/discourse/templates/components/topic-list-header-column.raw.hbs

@@ -0,0 +1,5 @@
+<th data-sort-order='{{order}}' class='{{view.className}}'>{{view.localizedName}}
+  {{~#if view.isSorting}}
+    <i class='{{view.sortClass}}'></i>
+  {{/if ~}}
+</th>

app/assets/javascripts/discourse/templates/components/topic-list-header.raw.hbs

@@ -0,0 +1,15 @@
+{{#if currentUser}}
+  <th class='star'>
+  {{#if canBulkSelect}}
+    <button class='btn bulk-select' title='{{i18n "topics.bulk.toggle"}}'><i class='fa fa-list'></i></button>
+  {{/if}}
+  </th>
+{{/if}}
+{{raw "components/topic-list-header-column" order='default' name='topic.title'}}
+{{#unless parent.hideCategory}}
+  {{raw "components/topic-list-header-column" sortable='true' order='category' name='category_title'}}
+{{/unless}}
+{{raw "components/topic-list-header-column" order='posters' name='users'}}
+{{raw "components/topic-list-header-column" sortable='true' number='true' order='posts' name='posts'}}
+{{raw "components/topic-list-header-column" sortable='true' number='true' order='views' name='views'}}
+{{raw "components/topic-list-header-column" sortable='true' number='true' order='activity' name='activity'}}

app/assets/javascripts/discourse/views/topic-list-header-column.js.es6

@@ -0,0 +1,38 @@
+export default Ember.Object.extend({
+
+  localizedName: function(){
+    if(this.forceName){
+      return this.forceName;
+    }
+
+    return I18n.t(this.name);
+  }.property(),
+
+  sortClass: function(){
+    return "fa fa-chevron-" + (this.parent.get("ascending") ? "up" : "down");
+  }.property(),
+
+  isSorting: function(){
+    return this.sortable && this.parent.get("order") === this.order;
+  }.property(),
+
+  className: function(){
+    var name = [];
+    if(this.order){
+      name.push(this.order);
+    }
+    if(this.sortable){
+      name.push("sortable");
+
+      if(this.get("isSorting")){
+        name.push("sorting");
+      }
+    }
+
+    if(this.number){
+      name.push("num");
+    }
+
+    return name.join(' ');
+  }.property()
+});