Add Backbone models, collection, views

index.html

@@ -20,6 +20,7 @@
             <div id="name">
               <h2></h2>
             </div>
+            <ul class="children"></ul>
           </section>
           <footer id="footer">
             Make Lists. Catch Fish. <3 Open Source.
@@ -27,8 +28,8 @@
         </section>
       </div>
     </div>
-    <script type="text/template" id="task-template">
-      <div class="task" data-id="<%- id %>">
+    <script type="text/template" id="taskTemplate">
+      <div class="task">
         <div class="link">•</div>
         <div class="content"><%= content %></div>
       </div>
@@ -36,5 +37,10 @@
     <script src="javascripts/vendor/jquery.min.js"></script>
     <script src="javascripts/vendor/lodash.min.js"></script>
     <script src="javascripts/vendor/backbone.js"></script>
+    <script src="javascripts/models/task.js"></script>
+    <script src="javascripts/collections/list.js"></script>
+    <script src="javascripts/views/list.js"></script>
+    <script src="javascripts/views/task.js"></script>
+    <script src="javascripts/app.js"></script>
   </body>
 </html>

javascripts/app.js

@@ -0,0 +1,13 @@
+var app = app || {};
+
+$(function(){
+
+  var tasks = [
+    {content: 'helloworld'},
+    {content: 'wtf'},
+    {content: 'rotterdam'},
+    {content: 'hahahah'}
+  ];
+
+  new app.ListView(tasks);
+});

javascripts/collections/list.js

@@ -0,0 +1,11 @@
+var app = app || {};
+
+(function() {
+
+  app.List = Backbone.Collection.extend({
+
+    model: app.Task
+    
+  });
+
+}());

javascripts/models/task.js

@@ -0,0 +1,14 @@
+var app = app || {};
+
+(function() {
+
+  app.Task = Backbone.Model.extend({
+
+    defaults: {
+      parent_id: '',
+      content: ''
+    },
+    
+  });
+
+}());

javascripts/views/list.js

@@ -0,0 +1,26 @@
+var app = app || {};
+
+(function() {
+
+  app.ListView = Backbone.View.extend({
+
+    el: $("#main .children"),
+    initialize: function(initialTasks) {
+      this.collection = new app.List(initialTasks);
+      this.render();
+    },
+    render: function() {
+      this.collection.each(function(task) {
+        this.renderTask(task);
+      }, this);
+    },
+    renderTask: function(task) {
+      var taskView = new app.TaskView({
+        model: task
+      });
+      this.$el.append(taskView.render().el);
+    }
+
+  });
+
+}());

javascripts/views/task.js

@@ -0,0 +1,18 @@
+var app = app || {};
+
+(function() {
+
+  app.TaskView = Backbone.View.extend({
+
+    tagName: 'li',
+    template: $('#taskTemplate').html(),
+
+    render: function() {
+      var tmpl = _.template(this.template);
+      this.$el.html(tmpl(this.model.toJSON()));
+      return this;
+    }
+
+  });
+
+}());

sass/app.scss

@@ -70,47 +70,50 @@ body {
       }
       .children {
         margin-left: 40px;
-        .task {
-          margin: 10px 0;
-          color: $fontcolor;
-          .link {
-            vertical-align: middle;
-            display: inline-block;
-            margin-top: 1px;
-            margin-left:1px;
-            height: 18px;
-            width:18px;
-            color: #666;
-            background: white;
-            left:50px;
-            text-indent:5px;
-            font-size:24px;
-            font-family: Arial;
-            line-height:19px;
-            z-index:6;
-            -moz-border-radius:12px;
-            -webkit-border-radius:12px;
-            -khtml-border-radius:12px;
-            border-radius:12px;
-          }
-          .with-children > .link {
-            background-color: #e0e0e0;
-          }
-          .open > .link {
-            background-color: white;
-          }
-          .link:hover {
-            cursor: pointer;
-            z-index: 8;
-            background-color: #aaa;
-          }
-          .content {
-            padding-left: 10px;
-            width: 90%;
-            line-height: 20px;
-            text-align: justify;
-            vertical-align: middle;
-            display: inline-block;
+        li {
+          list-style: none;
+          .task {
+            margin: 10px 0;
+            color: $fontcolor;
+            .link {
+              vertical-align: middle;
+              display: inline-block;
+              margin-top: 1px;
+              margin-left:1px;
+              height: 18px;
+              width:18px;
+              color: #666;
+              background: white;
+              left:50px;
+              text-indent:5px;
+              font-size:24px;
+              font-family: Arial;
+              line-height:19px;
+              z-index:6;
+              -moz-border-radius:12px;
+              -webkit-border-radius:12px;
+              -khtml-border-radius:12px;
+              border-radius:12px;
+            }
+            .with-children > .link {
+              background-color: #e0e0e0;
+            }
+            .open > .link {
+              background-color: white;
+            }
+            .link:hover {
+              cursor: pointer;
+              z-index: 8;
+              background-color: #aaa;
+            }
+            .content {
+              padding-left: 10px;
+              width: 90%;
+              line-height: 20px;
+              text-align: justify;
+              vertical-align: middle;
+              display: inline-block;
+            }
           }
         }
       }

stylesheets/app.css

@@ -5565,12 +5565,16 @@ body #gofish #main .children {
   margin-left: 40px;
 }
 /* line 73, ../sass/app.scss */
-body #gofish #main .children .task {
+body #gofish #main .children li {
+  list-style: none;
+}
+/* line 75, ../sass/app.scss */
+body #gofish #main .children li .task {
   margin: 10px 0;
   color: #333333;
 }
-/* line 76, ../sass/app.scss */
-body #gofish #main .children .task .link {
+/* line 78, ../sass/app.scss */
+body #gofish #main .children li .task .link {
   vertical-align: middle;
   display: inline-block;
   margin-top: 1px;
@@ -5590,22 +5594,22 @@ body #gofish #main .children .task .link {
   -khtml-border-radius: 12px;
   border-radius: 12px;
 }
-/* line 96, ../sass/app.scss */
-body #gofish #main .children .task .with-children > .link {
+/* line 98, ../sass/app.scss */
+body #gofish #main .children li .task .with-children > .link {
   background-color: #e0e0e0;
 }
-/* line 99, ../sass/app.scss */
-body #gofish #main .children .task .open > .link {
+/* line 101, ../sass/app.scss */
+body #gofish #main .children li .task .open > .link {
   background-color: white;
 }
-/* line 102, ../sass/app.scss */
-body #gofish #main .children .task .link:hover {
+/* line 104, ../sass/app.scss */
+body #gofish #main .children li .task .link:hover {
   cursor: pointer;
   z-index: 8;
   background-color: #aaa;
 }
-/* line 107, ../sass/app.scss */
-body #gofish #main .children .task .content {
+/* line 109, ../sass/app.scss */
+body #gofish #main .children li .task .content {
   padding-left: 10px;
   width: 90%;
   line-height: 20px;
@@ -5613,11 +5617,11 @@ body #gofish #main .children .task .content {
   vertical-align: middle;
   display: inline-block;
 }
-/* line 118, ../sass/app.scss */
+/* line 121, ../sass/app.scss */
 body #gofish #main > .children {
   margin-left: 0;
 }
-/* line 121, ../sass/app.scss */
+/* line 124, ../sass/app.scss */
 body #gofish #footer {
   color: #333333;
   margin: 10px 0;