Use Discourse.Resolver to load mobile templates when they exist

app/assets/javascripts/discourse.js

@@ -143,6 +143,8 @@ Discourse = Ember.Application.createWithMixins(Discourse.Ajax, {
     bootbox.animate(false);
     bootbox.backdrop(true); // clicking outside a bootbox modal closes it
 
+    this.set('mobile', $html.hasClass('mobile'));
+
     setInterval(function(){
       Discourse.Formatter.updateRelativeAge($('.relative-date'));
     },60 * 1000);

app/assets/javascripts/discourse/ember/resolver.js

@@ -16,6 +16,15 @@ Discourse.Resolver = Ember.DefaultResolver.extend({
     @returns {Template} the template (if found)
   **/
   resolveTemplate: function(parsedName) {
+    if (Discourse.get('mobile')) {
+      var mobileParsedName = this.parseName(parsedName.fullName.replace("template:", "template:mobile/"));
+      var mobileTemplate = this.findTemplate(mobileParsedName);
+      if (mobileTemplate) return mobileTemplate;
+    }
+    return this.findTemplate(parsedName) || Ember.TEMPLATES.not_found;
+  },
+
+  findTemplate: function(parsedName) {
     var resolvedTemplate = this._super(parsedName);
     if (resolvedTemplate) { return resolvedTemplate; }
 
@@ -36,7 +45,6 @@ Discourse.Resolver = Ember.DefaultResolver.extend({
       resolvedTemplate = Ember.TEMPLATES[decamelized];
       if (resolvedTemplate) { return resolvedTemplate; }
     }
-    return Ember.TEMPLATES.not_found;
   }
 
 });

app/assets/javascripts/discourse/templates/mobile/topic.js.handlebars

@@ -0,0 +1,9 @@
+{{#if postStream.loaded}}
+  <div class='container'>
+    Mobile Topic Page Loaded!
+  </div>
+{{else}}
+  <div class='container'>
+    <div class='spinner'>{{i18n loading}}</div>
+  </div>
+{{/if}}