#325 Backbone on Rails Part 2 pro
In the second part of this two part series on Backbone.js, we finish up the Raffler application. Included is how to create entries through a form, respond to events, extract sub-views, pre-populate records, visit routes, and more.
- Download:
- source codeProject Files in Zip (100 KB)
- mp4Full Size H.264 Video (44.8 MB)
- m4vSmaller H.264 Video (26 MB)
- webmFull Size VP8 Video (33.4 MB)
- ogvFull Size Theora Video (57.3 MB)
Resources
app/assets/javascripts/views/entries/entries_index.js.coffee
class Raffler.Views.EntriesIndex extends Backbone.View template: JST['entries/index'] events: 'submit #new_entry': 'createEntry' 'click #draw': 'drawWinner' initialize: -> @collection.on('reset', @render, this) @collection.on('add', @appendEntry, this) render: -> $(@el).html(@template()) @collection.each(@appendEntry) this appendEntry: (entry) => view = new Raffler.Views.Entry(model: entry) @$('#entries').append(view.render().el) drawWinner: (event) -> event.preventDefault() @collection.drawWinner() createEntry: (event) -> event.preventDefault() attributes = name: $('#new_entry_name').val() @collection.create attributes, wait: true success: -> $('#new_entry')[0].reset() error: @handleError handleError: (entry, response) -> if response.status == 422 errors = $.parseJSON(response.responseText).errors for attribute, messages of errors alert "#{attribute} #{message}" for message in messages
app/assets/templates/entries/index.jst.eco
<h1>Raffler</h1> <form id="new_entry"> <input type="text" name="name" id="new_entry_name"> <input type="submit" value="Add"> </form> <ul id="entries"></ul> <button id="draw">Draw Winner</button>
app/assets/javascripts/views/entries/entry.js.coffee
class Raffler.Views.Entry extends Backbone.View template: JST['entries/entry'] tagName: 'li' events: 'click': 'showEntry' initialize: -> @model.on('change', @render, this) @model.on('highlight', @highlightWinner, this) showEntry: -> Backbone.history.navigate("entries/#{@model.get('id')}", true) highlightWinner: -> $('.winner').removeClass('highlight') @$('.winner').addClass('highlight') render: -> $(@el).html(@template(entry: @model)) this
app/assets/templates/entries/entry.jst.eco
<%= @entry.get('name') %> <% if @entry.get('winner'): %> <span class="winner">WINNER</span> <% end %>
app/assets/javascripts/collections/entries.js.coffee
class Raffler.Collections.Entries extends Backbone.Collection url: '/api/entries' model: Raffler.Models.Entry drawWinner: -> winner = @shuffle()[0] winner.win() if winner
app/assets/javascripts/models/entry.js.coffee
class Raffler.Models.Entry extends Backbone.Model win: -> @set(winner: true) @save() @trigger('highlight')
main/index.html.erb
<%= content_tag "div", "Loading..", id: "container", data: {entries: Entry.all} %>
app/assets/javascripts/routers/entries_router.js.coffee
@collection.reset($('#container').data('entries'))
app/assets/javascripts/raffler.js.coffee
Backbone.history.start(pushState: true)
config/routes.rb
match '*path', to: 'main#index'