gistfile1.js

var CommentsController = $.sammy(function() { 
  // CONFIG ---------------------------------------------------------------

  this.debug = true;
  this.use(Sammy.EJS);
  this.use(Sammy.NestedParams);
  this.element_selector = "#comments_app";
  // this.location_proxy = new Sammy.DataLocationProxy(this);
  this.resources_loaded = false;
  
  // CALLBACK -------------------------------------------------------------

  this.before(function(context) {
    if (!context.app.resources_loaded && context.path != "#/") {
      this.redirect('#/connecting');
    };
  });
  
  // HELPERS --------------------------------------------------------------
  
  this.helpers({
    post_id: function() {
      return this.$element().attr('data-post-id');
    },
    $comment_toggle: function() {
      return $('#comment_toggle');
    },
    $comment_list: function() {
      return $('#comment_list');
    },
    $comment_form: function() {
      return $('#comment_form');
    },
    $connect_button: function() {
      return $("<a href='#/connecting' class='button'>enable comments</a>");
    },
    $disconnect_button: function() {
      return $("<a href='#/disconnecting' class='button'>disable comments</a>");
    },
    $ajax_loader: function() {
      return $("<img src='/images/ajax-loader.gif' title='loading ...' />");
    }
  });
  
  // BIND -----------------------------------------------------------------

  this.bind('run', function() {
    var context = this;
    context.$element().append("<div id='comment_toggle'></div>");
    context.$element().append("<ul id='comment_list'></ul>");
    context.$element().append("<div id='comment_form'></div>");
  });
  
  this.bind('load-comments', function() {
    var context = this;
    Comment.findAllRemote(context, function() {
      context.app.resources_loaded = true;
      context.redirect('#/comments');
    });
  });
  
  this.bind('load-form', function() {
    var context = this;
    var comment = new Comment({post_id: context.post_id()});
    context.$comment_form().empty().append(comment.to_form());
  });
  
  this.bind('remove-comment', function(e, data) {
    $('#comment_' + data.id).remove();
  });
  
  // ROUTE ----------------------------------------------------------------

  this.get('#/', function(context) {
    context.$comment_toggle().empty().append(context.$connect_button());
    context.$comment_list().empty();
    context.$comment_form().empty();
  });

  this.get('#/connecting', function(context) {
    context.$comment_toggle().empty().append(context.$ajax_loader());
    context.trigger('load-comments');
    context.trigger('load-form');
  });
  
  this.get('#/comments', function(context) {
    context.$comment_toggle().empty().append(context.$disconnect_button());
    context.$comment_list().empty().append(Comment.to_html());
  });

  this.post('#/posts/:post_id/comments', function(context) {
    Comment.create(context.params, function(success, comment) {
      if (success) {
        context.$comment_list().append(comment.to_html());
      } else {
        context.$comment_form().effect("highlight", {color: "#FF0000"}, 3000);
      };
    });
  });

  this.route('delete', '#/posts/:post_id/comments/:id', function(context) {
    var comment = Comment.find(context.params.id);
    comment.destroy();
    context.trigger('remove-comment', {id: comment.id()});
  });

  this.get('#/disconnecting', function(context) {
    context.redirect('#/');
  });
});