Backbone begins

app.js

@@ -77,8 +77,8 @@
      * Expose the standard locals that every external page should have available;
      * path, navItems and ghostGlobals
      */
-    ghostLocals = function(req, res, next) {
-        ghost.doFilter('ghostNavItems', {path: req.path, navItems: []}, function(navData) {
+    ghostLocals = function (req, res, next) {
+        ghost.doFilter('ghostNavItems', {path: req.path, navItems: []}, function (navData) {
             // Make sure we have a locals value.
             res.locals = res.locals || {};
 

core/admin/assets/js/admin-ui-temp.js

@@ -43,24 +43,6 @@
             $('body').toggleClass('fullscreen');
         });
 
-        $('.content-list-content li').on('click', function (e) {
-            var $target = $(e.target).closest('li'),
-                $preview = $('.content-preview');
-            $('.content-list-content li').removeClass('active');
-            $target.addClass('active');
-            // *****
-            // this means a *lot* of extra gumpf is in the DOM and should really be done with AJAX when we have proper
-            // data API endpoints
-            // ideally, we need a way to bind data to views properly... backbone marionette, angular, etc
-            // *****
-            //
-            /**
-             * @todo Remove gumpf
-             */
-            $preview.find('.content-preview-content .wrapper').html($target.data('content'));
-            $preview.find('.post-controls .post-edit').attr('href', '/ghost/editor/' + $target.data('id'));
-        });
-
         $('.options.up').on('click', function (e) {
             e.stopPropagation();
             $(this).next("ul").fadeToggle(200);

core/admin/assets/js/init.js

@@ -0,0 +1,20 @@
+/*globals window, Backbone */
+(function ($) {
+    "use strict";
+
+    var Ghost = {
+        Layout     : {},
+        View       : {},
+        Collection : {},
+        Model      : {},
+
+        settings: {
+            baseUrl: '/api/v0.1'
+        },
+
+        currentView: null
+    };
+
+    window.Ghost = Ghost;
+
+}());

core/admin/assets/js/models/post.js

@@ -0,0 +1,17 @@
+/*global window, document, Ghost, $, Backbone, _ */
+(function () {
+    "use strict";
+
+    Ghost.Model.Post = Backbone.Model.extend({
+        urlRoot: '/api/v0.1/posts/',
+        defaults: {
+            status: 'draft'
+        }
+    });
+
+    Ghost.Collection.Posts = Backbone.Collection.extend({
+        url: Ghost.settings.baseURL + '/posts',
+        model: Ghost.Model.Post
+    });
+
+}());

core/admin/assets/js/views/blog.js

@@ -0,0 +1,105 @@
+/*global window, document, Ghost, Backbone, $, _ */
+(function () {
+    "use strict";
+
+    // Base view
+    // ----------
+    Ghost.Layout.Blog = Backbone.Layout.extend({
+        initialize: function (options) {
+            this.addViews({
+                list    : new Ghost.View.ContentList({ el: '.content-list' }),
+                preview : new Ghost.View.ContentPreview({ el: '.content-preview' })
+            });
+
+            // TODO: render templates on the client
+            // this.render()
+        }
+    });
+
+    // Add shadow during scrolling
+    var scrollShadow = function (target, e) {
+        if ($(e.currentTarget).scrollTop() > 10) {
+            $(target).addClass('scrolling');
+        } else {
+            $(target).removeClass('scrolling');
+        }
+    };
+
+
+    // Content list (sidebar)
+    // -----------------------
+    Ghost.View.ContentList = Backbone.View.extend({
+        initialize: function (options) {
+            this.$('.content-list-content').on('scroll', _.bind(scrollShadow, null, '.content-list'));
+            // Select first item
+            _.defer(function (el) {
+                el.find('.content-list-content li:first').trigger('click');
+            }, this.$el);
+        },
+
+        events: {
+            'click .content-list-content'    : 'scrollHandler',
+            'click .content-list-content li' : 'showPreview'
+        },
+
+        showPreview: function (e) {
+            var item = $(e.currentTarget);
+            this.$('.content-list-content li').removeClass('active');
+            item.addClass('active');
+            Backbone.trigger("blog:showPreview", item.data('id'));
+        }
+    });
+
+    // Content preview
+    // ----------------
+    Ghost.View.ContentPreview = Backbone.View.extend({
+        initialize: function (options) {
+            this.listenTo(Backbone, "blog:showPreview", this.showPost);
+            this.$('.content-preview-content').on('scroll', _.bind(scrollShadow, null, '.content-preview'));
+        },
+
+        events: {
+            'click .post-controls .delete' : 'deletePost',
+            'click .post-controls .post-edit' : 'editPost'
+        },
+
+        deletePost: function (e) {
+            e.preventDefault();
+            this.model.destroy({
+                success: function (model) {
+                    // here the ContentList would pick up the change in the Posts collection automatically
+                    // after client-side rendering is implemented
+                    var item = $('.content-list-content li[data-id=' + model.get('id') + ']');
+                    item.next().add(item.prev()).eq(0).trigger('click');
+                    item.remove();
+                },
+                error: function () {
+                    // TODO: decent error handling
+                    console.error('Error');
+                }
+            });
+        },
+
+        editPost: function (e) {
+            e.preventDefault();
+            // for now this will disable "open in new tab", but when we have a Router implemented
+            // it can go back to being a normal link to '#/ghost/editor/X'
+            window.location = '/ghost/editor/' + this.model.get('id');
+        },
+
+        showPost: function (id) {
+            this.model = new Ghost.Model.Post({ id: id });
+            this.model.once('change', this.render, this);
+            this.model.fetch();
+        },
+
+        render: function () {
+            this.$('.wrapper').html(this.model.get('content_html'));
+        }
+    });
+
+    // Initialize views.
+    // TODO: move to a `Backbone.Router`
+    Ghost.currentView = new Ghost.Layout.Blog({ el: '#main' });
+
+}());

core/admin/assets/lib/backbone/backbone-layout.js

@@ -0,0 +1,56 @@
+// Layout manager
+// --------------
+/*
+ *   .addChild('sidebar', App.View.Sidebar)
+ *   .childViews.sidebar.$('blah')
+ */
+
+Backbone.Layout = Backbone.View.extend({
+    // default to loading state, reverted on render()
+    loading: true,
+
+    addViews: function (views) {
+        if (!this.views) this.views = {}
+
+        _.each(views, function(view, name){
+            if (typeof view.model === 'undefined'){
+                view.model = this.model
+            }
+            this.views[name] = view
+        }, this)
+        return this
+    },
+
+    renderViews: function (data) {
+        _.invoke(this.views, 'render', data)
+        this.trigger('render')
+        return this
+    },
+
+    appendViews: function (target) {
+        _.each(this.views, function(view){
+            this.$el.append(view.el)
+        }, this)
+        this.trigger('append')
+        return this
+    },
+
+    destroyViews: function () {
+        _.each(this.views, function(view){
+            view.model = null
+            view.remove()
+        })
+        return this
+    },
+
+    render: function () {
+        this.loading = false
+        this.renderViews()
+        return this
+    },
+
+    remove: function () {
+        this.destroyViews()
+        Backbone.View.prototype.remove.call(this)
+    }
+})