Merge branch 'master' into gh-pages

Conflicts:
	javascripts/app.js

javascripts/views/list.js

@@ -3,7 +3,9 @@ define(
         'backbone',
         'collections/list',
         'views/task',
-        'data/demo'
+        'data/demo',
+        'text!../../templates/task.html',
+        'marionette'
     ],
 
     function (
@@ -11,23 +13,35 @@ define(
         Backbone,
         List,
         TaskView,
-        demoData
+        demoData,
+        listTemplate,
+        Marionette
     ) {
 
-        var ListView = Backbone.View.extend({
+        // renders recursive tree structure for each item in collection
+        var ListView = Backbone.Marionette.CollectionView.extend({
 
             el: $("#main .children"),
+            childView: TaskView,
+            viewComparator: List.prototype.comporator,
+            template: _.template(listTemplate),
 
             events: {
                 'click #add': 'addTask'
             },
 
             initialize: function () {
-                Tasks = this.collection = new List();
+                var self = this;
 
-                this.listenTo(this.collection, 'add', this.renderTask);
+                // this wholeCollection holds all items
+                this.wholeCollection = Tasks = new List();
+                //this.collection = new List();
 
-                /** Load demo data and warn users **/
+                // custom events
+                this.listenTo(this, 'childview:rerender', this.render);
+                // this.listenTo(this.collection, 'add remove', this.render);
+
+                /** Load demo data **/
                 function loadDemoData() {
                     for (var i = 0; i < demoData.length; i++) {
                         var task = Tasks.add(demoData[i]);
@@ -35,53 +49,48 @@ define(
                     }
                 }
 
-                function success(data) {
+                function success(children, data, promise) {
                     // load demo data if the server returns nothing
-                    if (data.length === 0)
+                    var directChildren = children.filter(this.filterDirectChildren);
+                    if (directChildren.length === 0)
                         loadDemoData();
+                    this.collection = new List(Tasks.filter(this.filterDirectChildren));
+                    this.render();
                 }
 
-                this.collection.fetch({
+                Tasks.fetch({
                     success: success,
                     error: function () {
-                        // switch to localforage database if server isn't present
-                        window.hackflowyOffline=true;
+
+                        // switch to localforage database if server isn't present and fetch again
+                        // from there
+                        window.hackflowyOffline = true;
                         $('#header').append('<div class="alert-box secondary round">Running in offline mode, data may be lost </div>');
                         Tasks.fetch({
-                            success: success
+                            success: success,
+                            context: this
                         });
-                    }
+                    },
+                    context: this
                 });
 
             },
 
-            render: function () {
-                this.collection.each(function (task) {
-                    this.renderTask(task);
-                }, this);
+            // Only show direct children
+            filterDirectChildren: function (child, index, collection) {
+                return child.get('parentId') === 0;
             },
 
-            renderTask: function (task) {
-                var taskView = new TaskView({
-                    model: task
-                });
-                var a = taskView.render();
-                if (a.model.get('parentId') === 0) {
-                    this.$el.append(a.el);
-                } else {
-                    var parent = $('*[data-id="' + a.model.get('parentId') + '"]');
-                    if (parent.length === 0) {
-                        // TODO deal with loading order
-                        console.error("Parent not rendered yet: ", {
-                            selector: parent.selector,
-                            task: task
-                        });
-                        this.$el.append(a.el);
-                    } else {
-                        a.$el.insertBefore(parent.parents('li:first'));
-                    }
-                }
-            }
+            /** This is the root view in the tree **/
+            getParentView: function () {
+                return this;
+            },
+
+            /** Update parentId when added to collection **/
+            onAddChild: function(childView){
+                if (childView.model.get('parentId')!==0)
+                    childView.model.save({parentId: 0});
+            },
 
         });