LambdaCircus CoffeeScript / JS comparison

lambdacircus.coffee

class Quote extends Backbone.Model
    voteUp: =>
        d = $.post(@get('voteUp'), undefined, undefined, 'json')
        d.done (data) =>
            @voted = true
            @set data

    voteDown: =>
        d = $.post(@get('voteDown'), undefined, undefined, 'json')
        d.done (data) =>
            @voted = true
            @set data

    url: =>
        @get('self')


class QuoteView extends Backbone.View
    className: 'quote-container'
    tagName: 'div'
    template: _.template $('#template-quote').html()
    events:
        'click button.vote-up':       'voteUp'
        'click button.vote-down':     'voteDown'
        'click button.action-remove': 'actionRemove'

    initialize: ->
        @model.on 'change', @render
        @model.on 'remove', @remove

    render: =>
        json = @model.toJSON()
        json.displayAdded = new XDate(json.added).toString('yyyy-MM-dd HH:mm:ss')
        @$el.html @template(json)
        @$('a').attr('href', @model.get 'self')
        if @model.voted
            @disableVoting true
            @hideVoting()
        if [email protected]('deletable')
            @$('button.action-remove').hide()
        return @

    remove: =>
        @$el.remove()

    voteUp: ->
        @disableVoting true
        d = @model.voteUp()
        d.fail (f) =>
            @flash()
            @disableVoting false

    voteDown: ->
        @disableVoting true
        d = @model.voteDown()
        d.fail (f) =>
            @flash()
            @disableVoting false

    actionRemove: ->
        @disableVoting true
        d = @model.destroy()
        #d.done (data) =>
        #    @remove()
        d.fail (f) =>
            @flash()
            @disableVoting false

    flash: (cssClass='error-flash') ->
        el = $('<div />').addClass cssClass
        @$('.quote').append el
        el.fadeIn(200).fadeOut(600).queue ->
            el.remove()
            el.dequeue()

    disableVoting: (disabled=true) ->
        @$('.controls button').prop 'disabled', disabled

    hideVoting: ->
        controls = @$('.controls')
        controls.css opacity: 1
        controls.find('button').fadeOut 200
        controls.find('.voted').fadeIn 200


class QuoteList extends Backbone.Collection
    model: Quote


class QuoteListView extends Backbone.View
    tagName: 'div'

    initialize: ->
        @model.on 'add', @addOne
        @model.on 'reset', @reset

    addOne: (quote) =>
        view = new QuoteView(model: quote)
        @$el.append view.render().el

    reset: =>
        @$el.empty()
        @model.each (quote) => @addOne quote

    render: ->
        return @


class OverviewView extends Backbone.View
    tagName: 'div'

    render: ->
        return @

    remove: =>
        @$el.remove()


class NewQuoteView extends Backbone.View
    tagName: 'div'
    template: _.template $('#template-newquote').html()
    events:
        'submit form': 'addQuote'

    render: =>
        @$el.html @template()
        return @

    addQuote: (event) ->
        event.preventDefault()
        q = content: @$('textarea').val()
        d = $.ajax '/newQuote',
            data: JSON.stringify(q),
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json'
        d.done (data) ->
            router.navigate data.self, trigger: true


class AppView extends Backbone.View
    el: $('#app')

    initialize: ->
        $('body').on 'click', 'a.event-routed', (event) ->
            event.preventDefault()
            router.navigate @pathname, trigger: true

    replaceView: (view) ->
        view.render()
        if @currentView
            @currentView.remove()
        @currentView = view
        @$el.empty
        @$el.append view.el


class CircusRouter extends Backbone.Router
    routes:
        '':            'overview'
        'quotes':      'quotes'
        'quotes/:qid': 'quote'
        'newQuote':    'newQuote'

    overview: ->
        view = new OverviewView
        @app.replaceView view

    quotes: ->
        if @app.currentView instanceof QuoteListView
            quoteList = @app.currentView.model
        else
            quoteList = new QuoteList
            view = new QuoteListView(model: quoteList)
            @app.replaceView view
        $.getJSON('/quotes').success (data) ->
            quoteList.reset data

    quote: (qid) ->
        if @app.currentView instanceof QuoteListView
            quoteList = @app.currentView.model
        else
            quoteList = new QuoteList
            view = new QuoteListView(model: quoteList)
            @app.replaceView view
        $.getJSON('/quotes/' + qid).success (data) ->
            quoteList.reset [data]

    newQuote: ->
        @app.replaceView(new NewQuoteView)


$(document).ready ->
    $('.collapse').collapse()
    app = new AppView
    window.router = new CircusRouter
    router.app = app
    Backbone.history.start pushState: true

lambdacircus.js

var AppView, CircusRouter, NewQuoteView, OverviewView, Quote, QuoteList, QuoteListView, QuoteView,
  __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
  __hasProp = {}.hasOwnProperty,
  __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };

Quote = (function(_super) {
  __extends(Quote, _super);

  function Quote() {
    this.url = __bind(this.url, this);
    this.voteDown = __bind(this.voteDown, this);
    this.voteUp = __bind(this.voteUp, this);
    return Quote.__super__.constructor.apply(this, arguments);
  }

  Quote.prototype.voteUp = function() {
    var d;
    d = $.post(this.get('voteUp'), void 0, void 0, 'json');
    return d.done((function(_this) {
      return function(data) {
        _this.voted = true;
        return _this.set(data);
      };
    })(this));
  };

  Quote.prototype.voteDown = function() {
    var d;
    d = $.post(this.get('voteDown'), void 0, void 0, 'json');
    return d.done((function(_this) {
      return function(data) {
        _this.voted = true;
        return _this.set(data);
      };
    })(this));
  };

  Quote.prototype.url = function() {
    return this.get('self');
  };

  return Quote;

})(Backbone.Model);

QuoteView = (function(_super) {
  __extends(QuoteView, _super);

  function QuoteView() {
    this.remove = __bind(this.remove, this);
    this.render = __bind(this.render, this);
    return QuoteView.__super__.constructor.apply(this, arguments);
  }

  QuoteView.prototype.className = 'quote-container';

  QuoteView.prototype.tagName = 'div';

  QuoteView.prototype.template = _.template($('#template-quote').html());

  QuoteView.prototype.events = {
    'click button.vote-up': 'voteUp',
    'click button.vote-down': 'voteDown',
    'click button.action-remove': 'actionRemove'
  };

  QuoteView.prototype.initialize = function() {
    this.model.on('change', this.render);
    return this.model.on('remove', this.remove);
  };

  QuoteView.prototype.render = function() {
    var json;
    json = this.model.toJSON();
    json.displayAdded = new XDate(json.added).toString('yyyy-MM-dd HH:mm:ss');
    this.$el.html(this.template(json));
    this.$('a').attr('href', this.model.get('self'));
    if (this.model.voted) {
      this.disableVoting(true);
      this.hideVoting();
    }
    if (!this.model.get('deletable')) {
      this.$('button.action-remove').hide();
    }
    return this;
  };

  QuoteView.prototype.remove = function() {
    return this.$el.remove();
  };

  QuoteView.prototype.voteUp = function() {
    var d;
    this.disableVoting(true);
    d = this.model.voteUp();
    return d.fail((function(_this) {
      return function(f) {
        _this.flash();
        return _this.disableVoting(false);
      };
    })(this));
  };

  QuoteView.prototype.voteDown = function() {
    var d;
    this.disableVoting(true);
    d = this.model.voteDown();
    return d.fail((function(_this) {
      return function(f) {
        _this.flash();
        return _this.disableVoting(false);
      };
    })(this));
  };

  QuoteView.prototype.actionRemove = function() {
    var d;
    this.disableVoting(true);
    d = this.model.destroy();
    return d.fail((function(_this) {
      return function(f) {
        _this.flash();
        return _this.disableVoting(false);
      };
    })(this));
  };

  QuoteView.prototype.flash = function(cssClass) {
    var el;
    if (cssClass == null) {
      cssClass = 'error-flash';
    }
    el = $('<div />').addClass(cssClass);
    this.$('.quote').append(el);
    return el.fadeIn(200).fadeOut(600).queue(function() {
      el.remove();
      return el.dequeue();
    });
  };

  QuoteView.prototype.disableVoting = function(disabled) {
    if (disabled == null) {
      disabled = true;
    }
    return this.$('.controls button').prop('disabled', disabled);
  };

  QuoteView.prototype.hideVoting = function() {
    var controls;
    controls = this.$('.controls');
    controls.css({
      opacity: 1
    });
    controls.find('button').fadeOut(200);
    return controls.find('.voted').fadeIn(200);
  };

  return QuoteView;

})(Backbone.View);

QuoteList = (function(_super) {
  __extends(QuoteList, _super);

  function QuoteList() {
    return QuoteList.__super__.constructor.apply(this, arguments);
  }

  QuoteList.prototype.model = Quote;

  return QuoteList;

})(Backbone.Collection);

QuoteListView = (function(_super) {
  __extends(QuoteListView, _super);

  function QuoteListView() {
    this.reset = __bind(this.reset, this);
    this.addOne = __bind(this.addOne, this);
    return QuoteListView.__super__.constructor.apply(this, arguments);
  }

  QuoteListView.prototype.tagName = 'div';

  QuoteListView.prototype.initialize = function() {
    this.model.on('add', this.addOne);
    return this.model.on('reset', this.reset);
  };

  QuoteListView.prototype.addOne = function(quote) {
    var view;
    view = new QuoteView({
      model: quote
    });
    return this.$el.append(view.render().el);
  };

  QuoteListView.prototype.reset = function() {
    this.$el.empty();
    return this.model.each((function(_this) {
      return function(quote) {
        return _this.addOne(quote);
      };
    })(this));
  };

  QuoteListView.prototype.render = function() {
    return this;
  };

  return QuoteListView;

})(Backbone.View);

OverviewView = (function(_super) {
  __extends(OverviewView, _super);

  function OverviewView() {
    this.remove = __bind(this.remove, this);
    return OverviewView.__super__.constructor.apply(this, arguments);
  }

  OverviewView.prototype.tagName = 'div';

  OverviewView.prototype.render = function() {
    return this;
  };

  OverviewView.prototype.remove = function() {
    return this.$el.remove();
  };

  return OverviewView;

})(Backbone.View);

NewQuoteView = (function(_super) {
  __extends(NewQuoteView, _super);

  function NewQuoteView() {
    this.render = __bind(this.render, this);
    return NewQuoteView.__super__.constructor.apply(this, arguments);
  }

  NewQuoteView.prototype.tagName = 'div';

  NewQuoteView.prototype.template = _.template($('#template-newquote').html());

  NewQuoteView.prototype.events = {
    'submit form': 'addQuote'
  };

  NewQuoteView.prototype.render = function() {
    this.$el.html(this.template());
    return this;
  };

  NewQuoteView.prototype.addQuote = function(event) {
    var d, q;
    event.preventDefault();
    q = {
      content: this.$('textarea').val()
    };
    d = $.ajax('/newQuote', {
      data: JSON.stringify(q),
      type: 'POST',
      dataType: 'json',
      contentType: 'application/json'
    });
    return d.done(function(data) {
      return router.navigate(data.self, {
        trigger: true
      });
    });
  };

  return NewQuoteView;

})(Backbone.View);

AppView = (function(_super) {
  __extends(AppView, _super);

  function AppView() {
    return AppView.__super__.constructor.apply(this, arguments);
  }

  AppView.prototype.el = $('#app');

  AppView.prototype.initialize = function() {
    return $('body').on('click', 'a.event-routed', function(event) {
      event.preventDefault();
      return router.navigate(this.pathname, {
        trigger: true
      });
    });
  };

  AppView.prototype.replaceView = function(view) {
    view.render();
    if (this.currentView) {
      this.currentView.remove();
    }
    this.currentView = view;
    this.$el.empty;
    return this.$el.append(view.el);
  };

  return AppView;

})(Backbone.View);

CircusRouter = (function(_super) {
  __extends(CircusRouter, _super);

  function CircusRouter() {
    return CircusRouter.__super__.constructor.apply(this, arguments);
  }

  CircusRouter.prototype.routes = {
    '': 'overview',
    'quotes': 'quotes',
    'quotes/:qid': 'quote',
    'newQuote': 'newQuote'
  };

  CircusRouter.prototype.overview = function() {
    var view;
    view = new OverviewView;
    return this.app.replaceView(view);
  };

  CircusRouter.prototype.quotes = function() {
    var quoteList, view;
    if (this.app.currentView instanceof QuoteListView) {
      quoteList = this.app.currentView.model;
    } else {
      quoteList = new QuoteList;
      view = new QuoteListView({
        model: quoteList
      });
      this.app.replaceView(view);
    }
    return $.getJSON('/quotes').success(function(data) {
      return quoteList.reset(data);
    });
  };

  CircusRouter.prototype.quote = function(qid) {
    var quoteList, view;
    if (this.app.currentView instanceof QuoteListView) {
      quoteList = this.app.currentView.model;
    } else {
      quoteList = new QuoteList;
      view = new QuoteListView({
        model: quoteList
      });
      this.app.replaceView(view);
    }
    return $.getJSON('/quotes/' + qid).success(function(data) {
      return quoteList.reset([data]);
    });
  };

  CircusRouter.prototype.newQuote = function() {
    return this.app.replaceView(new NewQuoteView);
  };

  return CircusRouter;

})(Backbone.Router);

$(document).ready(function() {
  var app;
  $('.collapse').collapse();
  app = new AppView;
  window.router = new CircusRouter;
  router.app = app;
  return Backbone.history.start({
    pushState: true
  });
});