http://adamjspooner.github.io/coffeescript-meet-backbonejs/05/docs/script.html
- index.html
- src/
- hello.coffee
- lib/
- src/
open index.html
coffee -w -b -o lib/ src/
Last active
December 17, 2015 05:48
-
-
Save satomacoto/5559957 to your computer and use it in GitHub Desktop.
Hello backbone.js / script.coffee
This file contains hidden or 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
| jQuery -> | |
| class Item extends Backbone.Model | |
| defaults: | |
| part1: 'Hello' | |
| part2: 'Backbone' | |
| class List extends Backbone.Collection | |
| model: Item | |
| class ItemView extends Backbone.View | |
| tagName: 'li' | |
| initialize: -> | |
| _.bindAll @ | |
| @model.bind 'change', @render | |
| @model.bind 'remove', @unrender | |
| render: => | |
| $(@el).html """ | |
| <span>#{@model.get 'part1'} #{@model.get 'part2'}!</span> | |
| <span class="swap">swap</span> | |
| <span class="delete">delete</span> | |
| """ | |
| @ | |
| unrender: => | |
| $(@el).remove() | |
| swap: -> | |
| @model.set | |
| part1: @model.get 'part2' | |
| part2: @model.get 'part1' | |
| remove: -> @model.destroy() | |
| events: | |
| 'click .swap': 'swap' | |
| 'click .delete': 'remove' | |
| class ListView extends Backbone.View | |
| el: $ 'body' | |
| initialize: -> | |
| _.bindAll @ | |
| @collection = new List | |
| @collection.bind 'add', @appendItem | |
| @counter = 0 | |
| @render() | |
| render: -> | |
| $(@el).append '<button>Add List Item</button>' | |
| $(@el).append '<ul></ul>' | |
| addItem: -> | |
| @counter++ | |
| item = new Item | |
| item.set part2: "#{item.get 'part2'} #{@counter}" | |
| @collection.add item | |
| appendItem: (item) -> | |
| item_view = new ItemView model: item | |
| $('ul').append item_view.render().el | |
| events: 'click button': 'addItem' | |
| Backbone.sync = (method, model, success, error) -> | |
| success() | |
| list_view = new ListView |
This file contains hidden or 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>hello-backbonejs</title> | |
| </head> | |
| <body> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> | |
| <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script> | |
| <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script> | |
| <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> | |
| <script src="lib/hello.js" type="text/javascript"></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment