moving templates to external files, refactoring, cleanup

addyosmani · Dec 19, 2011 · 24552ff · 24552ff
1 parent d9eb981
commit 24552ff
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -1,13 +1,12 @@
 
-A complete Backbone mobile application demonstrating searching for images using the Flickr API with full support for pagination, bookmarking and more.
+A complete Backbone.js mobile application demonstrating searching for images using the Flickr API with full support for pagination, bookmarking and more.
 
 **Uses:**
-- Backbone.js for MVC
-- Underscore.js for Micro-templating and utilities
-- jQuery Mobile
-- LABjs for script loading
-- Flickr API for data
-
-
-**Current status:**
-Being heavily refactored and re-written. 
+<ul>
+	<li>Backbone.js to aid application structure, routing</li>
+	<li>Underscore.js for micro-templating and utilities</li>
+	<li>Require.js and AMD for modular separation of components</li>
+	<li>Require.js text plugin to enable external templates</li>
+	<li>jQuery Mobile + jQuery for DOM manipulation, mobile helpers</li>
+	<li>Flickr API for data</li>
+</ul>
diff --git a/app/libs/require-1.0.2.min.js → app/libs/require/require-1.0.2.min.js b/app/libs/require-1.0.2.min.js → app/libs/require/require-1.0.2.min.js
diff --git a/app/libs/require/text.js b/app/libs/require/text.js
diff --git a/app/templates/listview.html b/app/templates/listview.html
@@ -0,0 +1,8 @@
+<% _.each( results, function( item, i ){ %>
+        <li>
+<a class='ui-result' title='<%= item.get("title") %>' data-ajax="false" href="#photo/<%= item.get("id") %>">
+        <img title="<%= item.get("title") %>" src="<%= 'http://farm' + item.get("farm") + '.static.flickr.com/' + item.get("server") + '/' + item.get("id") + '_' + item.get("secret") + '_s.jpg' %>"/>
+        <h3><%= item.get("title") %></h3>
+         </a>
+       </li>
+    <% }); %>
diff --git a/app/templates/photoview.html b/app/templates/photoview.html
@@ -0,0 +1,19 @@
+<% _.each( results, function( item, i ){ %>
+
+        <img alt="<%= item.get("title")._content  %>" title="<%= item.get("title")._content  %>" src="<%= 'http://farm' + item.get("farm") + '.static.flickr.com/' + item.get("server") + '/' + item.get("id") + '_' + item.get("secret") + '_m.jpg' %>"/>
+
+    <ul data-role="listview" data-inset="true">
+        <li><span class="key">Title:</span> <%= item.get("title")._content %></li>
+        <li><span class="key">Description:</span> <%= item.get("description")._content %></li>
+        <li><span class="key">Views:</span> <%= item.get("views") %></li>
+        <li><span class="key">Location:</span> <%= item.get("owner").location %></li>
+        <li><span class="key">Taken by:</span> <%= item.get("owner").realname %></li>
+        <li><span class="key">Date taken:</span> <%= item.get("dates").taken %></li>
+        <li><span class="key">Date uploaded:</span> <%= new Date( item.get("dateuploaded") * 1000).toDateString() %></li>
+        <li class="ext"><iframe src="http://www.facebook.com/plugins/like.php?href=<%= item.get("urls").url[0]._content %>&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80&amp;appId=160332214053450" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></li>
+         <li class="ext"><a class="external_link" href="<%= item.get("urls").url[0]._content %>">View Original On Flickr.com</a></li>
+
+
+    </ul>
+
+<% }); %>
diff --git a/app/views/appview.js b/app/views/appview.js
@@ -30,7 +30,7 @@ define( ['jquery', 'backbone', 'utils', 'models/ResultCollection', 'models/Photo
                     var query = $( '#searchbox' ).val();
                     if ( query ) {
                         var sort = $( '#sortBy' ).val(),
-                                endpoint = mobileSearch.utils.queryConstructor( query, sort, 1 );
+                            endpoint = mobileSearch.utils.queryConstructor( query, sort, 1 );
 
                         location.hash = endpoint;
 

diff --git a/app/views/photoList.js b/app/views/photoList.js
@@ -1,5 +1,5 @@
-define( ['jquery', 'backbone', 'underscore'],
-        function( $, Backbone, _ ) {
+define( ['jquery', 'backbone', 'underscore','text!templates/photoview.html'],
+        function( $, Backbone, _ , photoTemplate) {
             // Using ECMAScript 5 strict mode during development. By default r.js will ignore that.
             "use strict";
 
@@ -11,7 +11,7 @@ define( ['jquery', 'backbone', 'underscore'],
 
                 renderList: function( collection ) {
 
-                    var compiled_template = _.template( $( "#photoviewul" ).html() );
+                    var compiled_template = _.template(photoTemplate);
 
                     mobileSearch.utils.loadPrompt( "Loading photo..." );
 

diff --git a/app/views/resultList.js b/app/views/resultList.js
@@ -1,5 +1,5 @@
-define( ['jquery', 'backbone', 'underscore'],
-        function( $, Backbone, _ ) {
+define( ['jquery', 'backbone', 'underscore','text!templates/listview.html'],
+        function( $, Backbone, _, listTemplate ) {
             // Using ECMAScript 5 strict mode during development. By default r.js will ignore that.
             "use strict";
 
@@ -12,7 +12,7 @@ define( ['jquery', 'backbone', 'underscore'],
 
                 renderList: function( collection ) {
 
-                    var compiled_template = _.template( $( "#listviewul" ).html() );
+                    var compiled_template = _.template( listTemplate );
 
                     mobileSearch.utils.loadPrompt( "Loading results..." );
 

diff --git a/index.html b/index.html
@@ -12,13 +12,14 @@
     <link rel="stylesheet" href="css/custom_mobile_theme.css"/>
     <link rel="stylesheet" href="css/style.css"/>
 
-    <script type="text/javascript" src="app/libs/require-1.0.2.min.js"></script>
+    <script type="text/javascript" src="app/libs/require/require-1.0.2.min.js"></script>
     <!--<script type="text/javascript" src="release/app.js"></script>-->
     <script type="text/javascript">
         require.config( {
             paths: {
                 'backbone':         'libs/AMDbackbone-0.5.3',
                 'underscore':       'libs/underscore-1.2.2',
+                'text':             'libs/require/text',
                 'jquery':           'libs/jQuery-1.7.1',
                 'json2':            'libs/json2',
                 'datepicker':       'libs/jQuery.ui.datepicker',
@@ -36,10 +37,12 @@
                             ['require', 'jquerymobile', 'json2', 'datepicker', 'datepickermobile',
                                 'app'],
                             function( require ) {
-                                /*
-                                 This is meant as a global config option for end users to disable hashchange listening
-                                 (as opposed to urlHistory.listeningEnabled, which is an internal toggle)
-                                 */
+
+                                 // Global overrides to disable hashchange listening
+                                 // (as opposed to using urlHistory.listeningEnabled)
+                                 // This makes it easier to focus on using Backbone's own
+                                 // routing:
+
                                 $.mobile.hashListeningEnabled = false;
                                 $.mobile.pushStateEnabled = false;
                                 $.mobile.page.prototype.options.degradeInputs.date = true;
@@ -74,7 +77,7 @@ <h1 class="app-title">Flickly</h1>
                 <li><a href="#index" id="search-icon" data-icon="custom">Search</a></li>
                 <li><a href="#options" id="options-icon" data-icon="custom">Options</a></li>
                 <li><a href="#instructions" id="instructions-icon" data-icon="custom">Help</a></li>
-                <li><a href="#source" id="source-icon" data-icon="custom">Source</a></li>
+                <li><a href="#source" id="source-icon" data-icon="custom">API Docs</a></li>
                 <li><a href="#about" id="about-icon" data-icon="custom">About</a></li>
             </ul>
         </div>
@@ -235,14 +238,11 @@ <h3>Options</h3>
 
 <div id="source" data-role="page" data-theme="b">
     <div data-role="header" data-theme="a">
-        <h1>Source</h1>
+        <h1>API Docs</h1>
     </div>
     <div data-role="content">
-        <ul data-role="listview" data-inset="true">
-            <li><a href="http://github.com/addyosmani"><img src="img/icons/github.png" alt="Github" class="ui-li-icon">Github</a>
-            </li>
-            <li><a href="#"><img src="img/icons/demo.png" alt="Demo" class="ui-li-icon">Demo</a></li>
-        </ul>
+        <p>For the complete <strong>Flickr API Documentation</strong> with references to the methods and formats supported, see <a href="http://www.flickr.com/services/api/">here</a>.</p>
+        <p>You can also sign-up for your own <a href="http://www.flickr.com/services/api/keys/">API keys</a>.</p>
     </div>
 </div>
 
@@ -258,7 +258,7 @@ <h1>Source</h1>
         <h1>About</h1>
     </div>
     <div data-role="content">
-        <p>A wireframe for the about page.</p>
+        <p>Flickly is a demo application written using <a href="http://documentcloud.github.com/backbone/">Backbone.js</a> and <a href="http://jquerymobile.com">jQuery Mobile</a>. <a href="http://requirejs.org/">Require.js</a> and the <a href="https://github.com/amdjs/amdjs-api/wiki/AMD">AMD</a> module format are used for breaking components down into modules whilst <a href="http://documentcloud.github.com/underscore/">Underscore.js</a> is used for templating.</p>
     </div>
 </div>
 
@@ -311,51 +311,6 @@ <h1>Search Results</h1>
 
 </div>
 
-<!--
-/********************************************************
-*  Templates
-*********************************************************/
--->
-
-
-<!--template for photoview-->
-<script type="text/template" id="photoviewul">
-<% _.each( results, function( item, i ){ %>
-
-        <img alt="<%= item.get("title")._content  %>" title="<%= item.get("title")._content  %>" src="<%= 'http://farm' + item.get("farm") + '.static.flickr.com/' + item.get("server") + '/' + item.get("id") + '_' + item.get("secret") + '_m.jpg' %>"/>
-
-    <ul data-role="listview" data-inset="true">
-        <li><span class="key">Title:</span> <%= item.get("title")._content %></li>
-        <li><span class="key">Description:</span> <%= item.get("description")._content %></li>
-        <li><span class="key">Views:</span> <%= item.get("views") %></li>
-        <li><span class="key">Location:</span> <%= item.get("owner").location %></li>
-        <li><span class="key">Taken by:</span> <%= item.get("owner").realname %></li>
-        <li><span class="key">Date taken:</span> <%= item.get("dates").taken %></li>
-        <li><span class="key">Date uploaded:</span> <%= new Date( item.get("dateuploaded") * 1000).toDateString() %></li>
-        <li class="ext"><iframe src="http://www.facebook.com/plugins/like.php?href=<%= item.get("urls").url[0]._content %>&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80&amp;appId=160332214053450" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe></li>
-         <li class="ext"><a class="external_link" href="<%= item.get("urls").url[0]._content %>">View Original On Flickr.com</a></li>
-
-
-    </ul>
-
-    <% }); %>
-</script>
-
-
-<!--template for list view -->
-<script type="text/template" id="listviewul">
-<% _.each( results, function( item, i ){ %>
-        <li>
-<a class='ui-result' title='<%= item.get("title") %>' data-ajax="false" href="#photo/<%= item.get("id") %>">
-        <img title="<%= item.get("title") %>" src="<%= 'http://farm' + item.get("farm") + '.static.flickr.com/' + item.get("server") + '/' + item.get("id") + '_' + item.get("secret") + '_s.jpg' %>"/>
-        <h3><%= item.get("title") %></h3>
-         </a>
-       </li>
-    <% }); %>
-</script>
-<!--template-->
-
-
 
 
 <div class="ui-tint">