Last active
December 25, 2015 19:29
-
-
Save lukewendling/7027680 to your computer and use it in GitHub Desktop.
Basic structure of a Rails API with Backbone frontend
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
### | |
# Rails Controller to manage an NFL team's fans | |
# from a email signup form | |
### | |
class FansController < ActionController::Base | |
def create | |
@fan = Fan.new(fan_params) | |
respond_to do |format| | |
if @fan.save | |
format.json { render json: :success } | |
else | |
format.json { render json: @fan.errors, status: :unprocessable_entity } | |
end | |
end | |
end | |
private | |
def fan_params | |
params.require(:fan).permit(:email, :zip) | |
end | |
end | |
### | |
# Backbone model and view to interact with the Rails API | |
### | |
$(function() { | |
var Fan = Backbone.Model.extend({ | |
defaults: { | |
email: '', | |
zip: '' | |
}, | |
urlRoot: '/fan', | |
updateAttrs: function(attrs, callbacks) { | |
this.save(attrs, callbacks); | |
}, | |
errors: [], | |
validate: function(attrs, options) { | |
this.errors = []; | |
if (!(/\S+@\S+/.test(attrs.email))) { | |
this.errors.push({name: 'email', message: 'Please enter a valid email address'}); | |
} | |
if (!(/[\w\s]{5,10}/.test(attrs.zip))) { | |
// we'll quietly accept Canadian codes too | |
this.errors.push({name: 'zip', message: 'Please enter a valid zip code'}); | |
} | |
return this.errors.length > 0 ? this.errors : false; | |
} | |
}); | |
var fan = new Fan(); | |
var FanView = Backbone.View.extend({ | |
initialize: function() { | |
this.model.on('invalid', this.callbacks.error, this); | |
}, | |
render: function() { | |
var attrs = this.model.toJSON(); | |
var source = $('#fan-template').html(); | |
var template = Handlebars.compile(source); | |
var html = template(attrs); | |
this.$el.html(html); | |
return this; | |
}, | |
events: { | |
'submit form': 'createFan' | |
}, | |
createFan: function(e) { | |
e.preventDefault(); | |
var email = this.$('#email').val(); | |
var zip = this.$('#zip').val(); | |
this.model.updateAttrs({email: email, zip: zip}, this.callbacks); | |
}, | |
callbacks: { | |
success: function() { | |
$('#success').show(); | |
$('#fail').hide(); | |
}, | |
error: function(results, errors) { | |
$('#success').show(); | |
$('#fail').hide(); | |
} | |
} | |
}); | |
var fanView = new FanView({model: fan}); | |
var $fanForm = $('#fan-form-container'); | |
$fanForm.html(fanView.render().el); | |
}); | |
### | |
# handlebars template (in Jade) | |
### | |
script(id="fan-template", type="text/x-handlebars-template") | |
form(action='/fan', method='post') | |
input.txt(name='email', id='email', type='email', required, placeholder='your email address') | |
input.txt(name='zipcode', id='zip', type='text', size='5', maxlength='10', required, placeholder='your zipcode *') | |
input.submit-form(type='submit', value='sign me up!') | |
#success.hidden.alert.alert-error | |
Success! | |
#fail.hidden.alert.alert-success | |
Oops, there was a problem | |
### | |
# template view | |
### | |
body | |
#fan-form-container |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment