dat provjs hack

hojberg · Oct 19, 2012 · fbc976d · fbc976d
1 parent 258386f
commit fbc976d
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 78 deletions.
diff --git a/public/index.html b/public/index.html
@@ -7,8 +7,7 @@
     <title>Cweepy</title>
     <link rel="stylesheet" type="text/css" href="css/master.css">
 
-    <!-- inline templates - for production, precompile instead -->
-    <script type='text/handlebars' id='header-tmpl'>
+    <script type='text/provjs' id='cweepy-header-tmpl'> 
       <header>
         <div class='header'>
           <h1>Cweepy</h1>
@@ -17,16 +16,16 @@ <h1>Cweepy</h1>
       </header>
     </script>
 
-    <script type='text/handlebars' id='add-cweep-tmpl'>
+    <script type='text/provjs' id='cweepy-add-cweep-tmpl'> 
       <div class='add-cweep-form'>
-        <input type='text' class='message' placeholder="What's cweeping you out?" />
-        <a class='button post'>Post!</a>
+        <input type='text' class='message' />
+        <a class='button post'>POST!</a>
       </div>
     </script>
 
-    <script type='text/handlebars' id='cweep-list-item-tmpl'>
+    <script type='text/provjs' id='cweepy-list-item-tmpl'> 
       <li>
-        <div class='avatar' style='background: url({{avatar}}); background-size: 50px 50px;'></div>
+        <div class='avatar' style='background: url({{avatar}}); background-size: 40px 40px;'></div>
         <div class='message'>{{message}}</div>
       </li>
     </script>
@@ -40,14 +39,14 @@ <h1>Cweepy</h1>
     <script src="http://yui.yahooapis.com/3.7.3/build/yui/yui-min.js"></script>
     <script src='/js/yui_config.js'></script>
     <script>
-      YUI().use('cweepy:app', function (Y) {
 
+      var Y = YUI().use('cweepy:app', 'cweepy:models:cweep_list', function (Y) {
         new Y.Cweepy.App({
-          container:      '#app',
-          viewContainer:  '#content'
+          container: '#app',
+          viewContainer: '#content'
         }).render().dispatch();
-
       });
+
     </script>
   </body>
 

diff --git a/public/js/app.js b/public/js/app.js
@@ -1,72 +1,59 @@
 YUI.add('cweepy:app', function (Y) {
 
-  Y.namespace('Cweepy').App = Y.Base.create('cweepy:app', 
+  Y.namespace('Cweepy').App = Y.Base.create('cweepy:app',
     Y.App,
     [],
   {
 
     views: {
-      cweeps: { type: Y.Cweepy.CweepListView }
+      cweeps: { type: Y.Cweepy.CweepListView } 
     },
 
     render: function () {
-      this.constructor.superclass.render.call(this);
-      this._renderHeader();
-      return this;
-    },
-
-    _renderHeader: function () {
       this.get('viewContainer').insert(
-        this.get('headerView').render().get('container'),
+        new Y.Cweepy.HeaderView({
+          modelList: this.get('cweepList')
+        }).render().get('container'),
         'before'
       );
+
+      return this;
     },
 
-    showCweeps: function (req, res) {
+    showCweeps: function () {
       var cweepList = this.get('cweepList');
 
-      this.showView(
-        'cweeps', 
-        { modelList: cweepList }
-      );
+      this.showView('cweeps', {
+        modelList: cweepList
+      });
 
       cweepList.load();
     }
 
   },
   {
     ATTRS: {
-
       routes: {
         value: [
-          { path: '/', callbacks: 'showCweeps' }
+          { path: '/', callback: 'showCweeps' }
         ]
       },
 
       cweepList: {
         valueFn: function () {
           return new Y.Cweepy.CweepList();
         }
-      },
-
-      headerView: {
-        valueFn: function () {
-          return new Y.Cweepy.HeaderView({
-            modelList: this.get('cweepList')
-          });
-        }
       }
-
     }
   });
 
 },
 '0.0.1',
 {
   requires: [
-    'app',
+    'app-base', 
+    'cweepy:views:cweep_list',
     'cweepy:models:cweep_list',
-    'cweepy:views:header',
-    'cweepy:views:cweep_list'
+    'cweepy:views:header'
   ]
 });
diff --git a/public/js/models/cweep.js b/public/js/models/cweep.js
@@ -7,6 +7,7 @@ YUI.add('cweepy:models:cweep', function (Y) {
     root: '/cweeps'
   });
 
+
 },
 '0.0.1',
 {

diff --git a/public/js/models/cweep_list.js b/public/js/models/cweep_list.js
@@ -1,19 +1,19 @@
 YUI.add('cweepy:models:cweep_list', function (Y) {
 
-  Y.namespace('Cweepy').CweepList = Y.Base.create('cweepy:cweep_list',
+  Y.namespace('Cweepy').CweepList = Y.Base.create('cweepy:cweepList',
     Y.ModelList,
     [Y.ModelSync.REST],
   {
-    url: '/cweeps',
-    model: Y.Cweepy.Cweep
+    model: Y.Cweepy.Cweep,
+    url: '/cweeps'
   });
-
+  
 },
 '0.0.1',
 {
   requires: [
     'model-list',
-    'model-sync-rest',
-    'cweepy:models:cweep'
+    'cweepy:models:cweep',
+    'model-sync-rest'
   ]
 });
diff --git a/public/js/views/add_cweep_view.js b/public/js/views/add_cweep_view.js
@@ -1,33 +1,32 @@
 YUI.add('cweepy:views:add_cweep', function (Y) {
 
+  var avatar = 'https://si0.twimg.com/profile_images/1968705093/avatar.jpg';
+
   Y.namespace('Cweepy').AddCweepView = Y.Base.create('cweepy:addCweepView',
     Y.View,
     [],
   {
-
     events: {
       '.button.post': { click: 'save' }
     },
 
     template: Y.Handlebars.compile(
-      Y.one('#add-cweep-tmpl').getContent()
+      Y.one('#cweepy-add-cweep-tmpl').getContent()
     ),
 
     render: function () {
       this.get('container').setContent(
         this.template()
       );
-
       return this;
     },
 
     save: function () {
       var message = this.get('container').one('.message').get('value');
 
-      this.get('modelList').create({
-        avatar: 'https://si0.twimg.com/profile_images/1968705093/avatar.jpg', 
-        message: message
-      });
+      this.get('modelList').create(
+        { message: message, avatar: avatar }
+      );
 
       this.remove();
     }
@@ -38,7 +37,7 @@ YUI.add('cweepy:views:add_cweep', function (Y) {
 '0.0.1',
 {
   requires: [
-    'view',
+    'view', 
     'handlebars'
   ]
 });
diff --git a/public/js/views/cweep_list_view.js b/public/js/views/cweep_list_view.js
@@ -1,40 +1,35 @@
 YUI.add('cweepy:views:cweep_list', function (Y) {
 
-  Y.namespace('Cweepy').CweepListView = Y.Base.create('cweepy:cweepsView',
+  Y.namespace('Cweepy').CweepListView = Y.Base.create('cweepy:cweepListView',
     Y.View,
     [],
   {
 
-    containerTemplate: '<div class="cweep-list"/>',
+    containerTemplate: '<ul class="cweep-list"/>',
 
-    template: Y.Handlebars.compile( 
-      Y.one('#cweep-list-item-tmpl').getContent() 
+    template: Y.Handlebars.compile(
+      Y.one('#cweepy-list-item-tmpl').getContent()
     ),
 
     initializer: function () {
       var modelList = this.get('modelList');
-
       modelList.after('load', this.render, this);
       modelList.after('add', this._afterModelListAdd, this);
     },
 
+    _afterModelListAdd: function (ev) {
+      this.add( ev.model );
+    },
+
     render: function () {
-      Y.Array.each(
-        this.get('modelList').toArray(),
-        this.add,
-        this
-      );
+      this.get('modelList').each(this.add, this);
 
       return this;
     },
 
-    _afterModelListAdd: function (ev) {
-      this.add( ev.model );
-    },
-
     add: function (model) {
       this.get('container').prepend(
-        this.template(model.toJSON())
+        this.template( model.toJSON() )
       );
     }
 

diff --git a/public/js/views/header_view.js b/public/js/views/header_view.js
@@ -1,6 +1,6 @@
 YUI.add('cweepy:views:header', function (Y) {
 
-  Y.namespace('Cweepy').HeaderView = Y.Base.create('cweepy:app',
+  Y.namespace('Cweepy').HeaderView = Y.Base.create('cweepy:headerView',
     Y.View,
     [],
   {
@@ -10,33 +10,40 @@ YUI.add('cweepy:views:header', function (Y) {
     },
 
     template: Y.Handlebars.compile(
-      Y.one('#header-tmpl').getContent()
+      Y.one('#cweepy-header-tmpl').getContent()
     ),
 
     render: function () {
       this.get('container').setContent(
         this.template()
       );
-
       return this;
     },
 
     showAddCweep: function () {
       this.get('container').append(
-        new Y.Cweepy.AddCweepView({
-          modelList: this.get('modelList')
-        }).render().get('container')
+        this.get('addCweepView').render().get('container')
       );
     }
 
+  },
+  {
+    ATTRS: {
+      addCweepView: {
+        valueFn: function () {
+          return new Y.Cweepy.AddCweepView({
+            modelList: this.get('modelList')
+          });
+        }
+      }
+    }
   });
 
 },
-'0.0.1', 
+'0.0.1',
 {
   requires: [
     'view',
-    'cweepy:views:add_cweep',
-    'handlebars'
+    'cweepy:views:add_cweep'
   ]
 });
diff --git a/server.js b/server.js
@@ -23,7 +23,7 @@ server.get('/', function (req, res, next) {
 });
 
 var FAKE_DATA_STORE = [
-  { avatar: 'https://si0.twimg.com/profile_images/2536088319/4sl2go65was3o0km520j_reasonably_small.jpeg', message: 'Tom Dale is my hero' },
+  { avatar: 'https://si0.twimg.com/profile_images/2536088319/4sl2go65was3o0km520j_reasonably_small.jpeg', message: 'I love ActionScript' },
   { avatar: 'https://si0.twimg.com/profile_images/2201732897/notch_weird.png', message: 'Endermen used to be people' },
   { avatar: 'https://si0.twimg.com/profile_images/1968705093/avatar.jpg', message: 'dat cweep' },
   { avatar: 'https://si0.twimg.com/profile_images/2536088319/4sl2go65was3o0km520j_reasonably_small.jpeg', message: "We don't go to Ravenholm" }