JST working with external templates

timhc22 · Apr 20, 2015 · 8f5d954 · 8f5d954
1 parent 722f4ec
commit 8f5d954
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 76 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -13,6 +13,7 @@ var gulp            = require('gulp'),
     sass            = require('gulp-sass'),
     template        = require('gulp-template-compile'),
     concat          = require('gulp-concat'),
+    insert          = require('gulp-insert'),
     sourcemaps      = require('gulp-sourcemaps'),
     autoprefixer    = require('gulp-autoprefixer'),
     uglify          = require('gulp-uglify'),
@@ -71,6 +72,8 @@ gulp.task('compileTemplates', function () {
     //return enables a stream, so other tasks know it is finished?
     return gulp.src(config.templates.src)
         .pipe(template())
+        .pipe(insert.prepend("var _ = require('underscore');" + "\n")) //ADD REQUIRE UNDERSCORE TO TEMPLATES FILE
+        .pipe(insert.prepend("//THIS JST TEMPLATES FILE IS AUTOGENERATED BY GULP AND GITIGNORED " + "\n")) //ADD REQUIRE UNDERSCORE TO TEMPLATES FILE
         .pipe(concat('_templates.js'))
         .pipe(gulp.dest(config.templates.dest));
 });

diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "gulp-filesize": "0.0.6",
     "gulp-iconfont": "^1.0.0",
     "gulp-imagemin": "^2.2.1",
+    "gulp-insert": "^0.4.0",
     "gulp-minify-css": "~0.5.1",
     "gulp-notify": "^2.2.0",
     "gulp-plumber": "^1.0.0",

diff --git a/src/javascript/_backbone.js b/src/javascript/_backbone.js
@@ -9,8 +9,8 @@ var _ = require('underscore'); //todo is this going to work? i.e. require uses b
 var Backbone = require('backbone');
 Backbone.$ = $;
 Backbone.LocalStorage = require("backbone.localstorage");
-var JST = require('./_templates');
 
+require('./_templates'); //include JST templates (gitignored) doesn't work if assign to a variable
 
 //todo module.exports
 //_.templateSettings = { interpolate : /\{\{(.+?)\}\}/g };
@@ -57,31 +57,48 @@ $(function()
     // Views
     //--------------
 
+    //header
     App.HeaderView = Backbone.View.extend({
         el: '#headerContent',
-        //template: window["JST"]["test.html"],
-        template: JST['header.html'](),
+        template: JST['_header.html'],
+        //template: JST['_header.html'](data),
         //template: _.template("<h1>Some text</h1>"),
 
         initialize: function () {
             this.render();
         },
 
         render: function() {
-            //var html = this.template();
-            //// Append the result to the view's element.
-            //$(this.el).append(html);
             this.$el.html(this.template());
             return this; // enable chained calls
         }
     });
 
+    //footer
+    App.FooterView = Backbone.View.extend({
+        el: '#footerContent',
+        template: JST['_footer.html'],
+        //template: JST['_header.html'](data),
+        //template: _.template("<h1>Some text</h1>"),
+
+        initialize: function () {
+            this.render();
+        },
+
+        render: function() {
+            this.$el.html(this.template());
+            return this; // enable chained calls
+        }
+    });
+
+
+
 
     // renders individual todo items list (li)
     App.TodoView = Backbone.View.extend({
         tagName: 'li',
         template: _.template($('.js-item-template').html()),
-        //template: window.JST['views/_todo.html'](),
+        //template: JST['_todo.html'],
         render: function(){
             this.$el.html(this.template(this.model.toJSON()));
             this.input = this.$('.edit');
@@ -195,8 +212,10 @@ $(function()
     App.router = new App.Router();
     Backbone.history.start();
 
-    App.appView = new App.AppView();
     App.headerView = new App.HeaderView();
+    App.footerView = new App.FooterView();
+
+    App.appView = new App.AppView();
 
 
     //var todo = new app.Todo({title: 'Learn Backbone.js', completed: false}); // create object with the attributes specified.

diff --git a/src/sass/_backboneapp.scss b/src/sass/_backboneapp.scss
@@ -0,0 +1,18 @@
+#todoapp ul {
+    list-style-type: none;
+}
+
+#todoapp ul li {
+}
+
+#todo-list input.edit {
+    display: none;
+}
+
+#todo-list .editing label {
+    display: none; /* hide when editing */
+}
+
+#todo-list .editing input.edit {
+    display: inline; /* Shows input text box when .editing*/
+}
diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -6,6 +6,7 @@
 @import 'typography';
 @import 'menu';
 @import 'frontpage';
+@import 'backboneapp';
 @import 'footer';
 @import 'various';
 

diff --git a/src/views/_todo.html b/src/views/_todo.html
@@ -1,9 +1,7 @@
 <!-- template for each li in todolist -->
-<script type="text/template" class="js-item-template">
-    <div class="view">
-        <input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
-        <label><%- title %></label>
-        <input class="edit" value="<%- title %>">
-        <button class="destroy">remove</button>
-    </div>
-</script>
+<div class="view">
+    <input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
+    <label><%- title %></label>
+    <input class="edit" value="<%- title %>">
+    <button class="destroy">remove</button>
+</div>
diff --git a/src/views/_todos.html b/src/views/_todos.html
@@ -1,25 +1,29 @@
-<!--<h3 class="section-heading">To Dos</h3>-->
+<div class="section get-help">
+    <div class="container">
 
-<!--<div id="todo">-->
-<!--</div>-->
-<!--<script type="text/template" id="item-template">-->
-<!--<div>-->
-<!--<input id="todo_complete" type="checkbox" <%= completed ? 'checked="checked"' : '' %>>-->
-<!--<%= title %>-->
-<!--</div>-->
-<!--</script>-->
+        <section id="todoapp" class="js-todoapp">
+            <header id="header">
+                <h1>Todos</h1>
+                <input class="js-new-todo" placeholder="What needs to be done?">
+                <div>
+                    <a href="#/">show all</a> |
+                    <a href="#/pending">show pending</a> |
+                    <a href="#/completed">show completed</a>
+                </div>
+            </header>
+            <section id="main">
+                <ul id="todo-list" class="js-todo-list"></ul>
+            </section>
+        </section>
 
-<section id="todoapp" class="js-todoapp">
-    <header id="header">
-        <h1>Todos</h1>
-        <input class="js-new-todo" placeholder="What needs to be done?">
-        <div>
-            <a href="#/">show all</a> |
-            <a href="#/pending">show pending</a> |
-            <a href="#/completed">show completed</a>
-        </div>
-    </header>
-    <section id="main">
-        <ul id="todo-list" class="js-todo-list"></ul>
-    </section>
-</section>
+    </div>
+</div>
+
+<script type="text/template" class="js-item-template">
+    <div class="view">
+        <input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
+        <label><%- title %></label>
+        <input class="edit" value="<%- title %>">
+        <button class="destroy">remove</button>
+    </div>
+</script>
diff --git a/src/views/index.html b/src/views/index.html
@@ -8,27 +8,6 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
-    <style>
-        #todoapp ul {
-            list-style-type: none;
-        }
-
-        #todoapp ul li {
-        }
-
-        #todo-list input.edit {
-            display: none;
-        }
-
-        #todo-list .editing label {
-            display: none; /* hide when editing */
-        }
-
-        #todo-list .editing input.edit {
-            display: inline; /* Shows input text box when .editing*/
-        }
-    </style>
-
     <!-- Mobile Specific Metas
     –––––––––––––––––––––––––––––––––––––––––––––––––– -->
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -48,17 +27,13 @@
 </head>
 <body>
 
-
-<div id="headerContent" class="headerContent">hi</div>
-
-<div id="pageContent"></div>
+<div id="headerContent"></div>
 
 <!--<div id="pageContent"></div>-->
 
 <div class="section get-help">
     <div class="container">
 
-
         <section id="todoapp" class="js-todoapp">
             <header id="header">
                 <h1>Todos</h1>
@@ -73,19 +48,19 @@ <h1>Todos</h1>
                 <ul id="todo-list" class="js-todo-list"></ul>
             </section>
         </section>
-        <!-- template for each li in todolist -->
-        <script type="text/template" class="js-item-template">
-            <div class="view">
-                <input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
-                <label><%- title %></label>
-                <input class="edit" value="<%- title %>">
-                <button class="destroy">remove</button>
-            </div>
-        </script>
 
     </div>
 </div>
 
+<script type="text/template" class="js-item-template">
+    <div class="view">
+        <input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
+        <label><%- title %></label>
+        <input class="edit" value="<%- title %>">
+        <button class="destroy">remove</button>
+    </div>
+</script>
+
 <div id="footerContent"></div>
 
 
@@ -94,7 +69,6 @@ <h1>Todos</h1>
 
 <!-- JS
 –––––––––––––––––––––––––––––––––––––––––––––––––– -->
-<script src="templates/_templates.js"></script>
 <script src="js/functions.js"></script>
 </body>
 </html>
diff --git a/src/views/test.html b/src/views/test.html