Rearchitect the browser to use routes more

app/subapps/browser/views/charm.js

Index: app/subapps/browser/views/charm.js
=== modified file 'app/subapps/browser/views/charm.js'
--- app/subapps/browser/views/charm.js	2013-04-12 07:01:02 +0000
+++ app/subapps/browser/views/charm.js	2013-04-16 00:05:52 +0000
@@ -3,6 +3,7 @@
 
 YUI.add('subapp-browser-charmview', function(Y) {
   var ns = Y.namespace('juju.browser.views'),
+      models = Y.namespace('juju.models'),
       views = Y.namespace('juju.views'),
       widgets = Y.namespace('juju.widgets'),
       DATE_FORMAT = '%H:%M %d/%b/%y';
@@ -29,7 +30,7 @@
      *
      */
     events: {
-      '.changelog .expandToggle': {
+      '.changelog h3.section-title': {
         click: '_toggleLog'
       },
       '.charm .add': {
@@ -55,6 +56,31 @@
     },
 
     /**
+     * Shared method to generate a message to the user based on a bad api
+     * call.
+     *
+     * @method apiFailure
+     * @param {Object} data the json decoded response text.
+     * @param {Object} request the original io_request object for debugging.
+     *
+     */
+    apiFailure: function(data, request) {
+      var message;
+      if (data && data.type) {
+        message = 'Charm API error of type: ' + data.type;
+      } else {
+        message = 'Charm API server did not respond';
+      }
+      this.get('db').notifications.add(
+          new models.Notification({
+            title: 'Failed to load sidebar content.',
+            message: message,
+            level: 'error'
+          })
+      );
+    },
+
+    /**
      * The API retuns the questions and the scores. Combine the data into a
      * single source to make looping in the handlebars templates nicer.
      *
@@ -263,7 +289,6 @@
 
             }
           }, this);
-
     },
 
     /**
@@ -334,29 +359,30 @@
     },
 
     /**
-     * Render out the view to the DOM.
+     * Render the view of a single charm details page.
      *
-     * @method render
-     * @param {Node} container optional specific container to render out to.
+     * @method _renderCharmView
+     * @param {BrowserCharm} charm the charm model instance to view.
+     * @param {Boolean} isFullscreen is this display for the fullscreen
+     * experiecne?
      *
      */
-    render: function(container, isFullscreen) {
-      var charm = this.get('charm');
-      var tplData = charm.getAttrs();
+    _renderCharmView: function(charm, isFullscreen) {
+      this.set('charm', charm);
+
+      var tplData = charm.getAttrs(),
+          container = this.get('container');
+
       tplData.isFullscreen = isFullscreen;
       tplData.prettyCommits = this._formatCommitsForHtml(
           tplData.recent_commits);
 
       var tpl = this.template(tplData);
-      var tplNode = Y.Node.create(tpl);
-
-      container.setHTML(tplNode);
-
-      // Allow for specifying the container to use. This should reset the
+      var tplNode = container.setHTML(tpl);
+
+      // Set the content then update the container so that it reload
       // events.
-      if (container) {
-        this.set('container', container);
-      }
+      Y.one('.bws-view-data').setHTML(tplNode);
 
       this.tabview = new widgets.browser.TabView({
         srcNode: tplNode.one('.tabs')
@@ -374,10 +400,45 @@
       } else {
         this._noReadme(tplNode.one('#bws-readme'));
       }
+    },
+
+    /**
+       Render out the view to the DOM.
+
+       The View might be given either a charmID, which means go fetch the
+       charm data, or a charm model instance, in which case the view has the
+       data it needs to render.
+
+       @method render
+
+     */
+    render: function() {
+      var isFullscreen = this.get('isFullscreen');
+
+      if (this.get('charm')) {
+        this._renderCharmView(this.get('charm'), isFullscreen);
+      } else {
+        this.get('store').charm(this.get('charmID'), {
+          'success': function(data) {
+            var charm = new models.BrowserCharm(data);
+            this.set('charm', charm);
+            this._renderCharmView(this.get('charm'), isFullscreen);
+          },
+          'failure': this.apiFailure
+        }, this);
+      }
     }
   }, {
     ATTRS: {
       /**
+         @attribute charmID
+         @default undefined
+         @type {Int}
+
+       */
+      charmID: {},
+
+      /**
        * The charm we're viewing the details of.
        *
        * @attribute charm
@@ -388,6 +449,16 @@
       charm: {},
 
       /**
+         @attribute isFullscreen
+         @default false
+         @type {Boolean}
+
+       */
+      ifFullscreen: {
+        value: false
+      },
+
+      /**
        * The store is the api endpoint for fetching data.
        *
        * @attribute store
@@ -408,9 +479,12 @@
     'datatype-date-format',
     'event-tracker',
     'gallery-markdown',
+    'juju-charm-store',
+    'juju-models',
     'juju-templates',
     'juju-views',
     'juju-view-utils',
+    'node',
     'prettify',
     'view'
   ]