Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
LambdaCircus CoffeeScript / JS comparison
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 !@model.get('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
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
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment