more emberification

toolness · Jul 11, 2012 · 8e42edf · 8e42edf
1 parent 52a7dba
commit 8e42edf
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 21 deletions.
diff --git a/static/index.html b/static/index.html
@@ -48,31 +48,30 @@ <h1>Thimble Gallery LOL</h1>
           and featureless.</p>
       </div>
 
-      <!-- Example row of columns -->
-      <ul class="thumbnails"></ul>
-
+      <script type="text/x-handlebars">
+      <ul class="thumbnails">
+        {{#each App.thimblePageController.pages}}
+        <li class="span3">
+          <div class="thumbnail">
+            <a {{bindAttr href="viewURL"}}><img
+              {{bindAttr src="thumbnailURL"}}></a>
+          </div>
+        </li>
+        {{/each}}
+      </ul>
+      </script>
+
       <hr>
 
       <a href="" id="more" class="btn btn-inverse" style="display: none; float: right;">More&hellip;</a>
 
     </div> <!-- /container -->
-
-    <!-- Le templates -->
-    <script type="text/x-handlebars" data-template-name="thumbnail">
-    <li class="span3">
-      <div class="thumbnail">
-        <a {{bindAttr href="viewURL"}}><img
-          {{bindAttr src="thumbnailURL"}}></a>
-      </div>
-    </li>
-    </script>
 
     <!-- Le javascript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="jquery.min.js"></script>
     <script src="ember.min.js"></script>
-
     <script src="main.js"></script>
   </body>
 </html>
diff --git a/static/main.js b/static/main.js
@@ -1,6 +1,20 @@
 var PAGE_SIZE = 20;
 
-window.App = Ember.Application.create();
+var App = Ember.Application.create();
+
+var ThimblePage = Ember.Object.extend({
+  key: null,
+  viewURL: function() {
+    return 'https://thimble.webmaker.org/p/' + this.get('key');
+  }.property('key'),
+  thumbnailURL: function() {
+    return '/images/' + this.get('key') + '.png';
+  }.property('key')
+});
+
+App.thimblePageController = Ember.Object.create({
+  pages: []
+});
 
 function show(end) {
   var start = end - PAGE_SIZE;
@@ -11,12 +25,9 @@ function show(end) {
   $.getJSON('/unique/' + start + '/' + PAGE_SIZE, function(data) {
     data.reverse();
     data.forEach(function(key) {
-      var view = Ember.View.create({
-        templateName: "thumbnail",
-        viewURL: 'https://thimble.webmaker.org/p/' + key,
-        thumbnailURL: '/images/' + key + '.png'
-      });
-      view.appendTo('ul.thumbnails');
+      App.thimblePageController.pages.pushObject(ThimblePage.create({
+        key: key
+      }));
     });
   });
 }