script.coffee | |
|---|---|
Extending Backbone.View | |
| First, we'll extend 12 | Backbone.View to create a 13 | very minimal unordered list view. Take a look at the implementation 14 | of this step so you'll know what we're building. | |
| The | jQuery ->
17 | |
| Our main application view. | class ListView extends Backbone.View
18 | |
| We'll be using the | el: $ 'body'
22 | |
|
| initialize: -> |
| We're using Underscore.js's bindAll method 24 | to bind all the view's methods to this instance of our view. | _.bindAll @
25 | @render()
26 | |
|
| render: ->
28 | $(@el).append '<ul><li>Hello, Backbone!</li></ul>'
29 |
30 | |
| Lastly, we instantiate our main app view. | list_view = new ListView |
| Onward to Part 2. | |
Looking for the documentation?
17 | script.coffee | |
|---|---|
Binding DOM Events to View Methods | |
| So, part one was pretty boring. Let's spice it up by 12 | binding DOM events to our view's methods. The implementation of this 13 | step is slighlty more exciting than the last. | |
jQuery ->
14 |
15 | class ListView extends Backbone.View
16 |
17 | el: $ 'body'
18 |
19 | initialize: ->
20 | _.bindAll @
21 | @counter = 0
22 | @render()
23 | | |
| We'll add a button and an empty list to our view. | render: ->
24 | $(@el).append '<button>Add List Item</button>'
25 | $(@el).append '<ul></ul>'
26 | |
|
| addItem: ->
28 | @counter++
29 | $('ul').append "<li>Hello, Backbone #{@counter}!</li>"
30 | |
|
| events: 'click button': 'addItem'
34 |
35 |
36 | list_view = new ListView |
| Onward to Part 3. | |
Looking for the documentation?
17 | script.coffee | |
|---|---|
Using a Collection of Models | |
| So far we've used the view as our view and model. We'll extend 12 | Backbone.Model and Backbone.Collection to separate our model from our view. | |
| You might want to view the implementation of this step before 13 | diving in. | |
jQuery ->
14 | | |
| The model is the heart 15 | of any application. We have a very small heart in this example. | class Item extends Backbone.Model
16 | |
|
| defaults:
18 | part1: 'Hello'
19 | part2: 'Backbone'
20 |
21 | |
| Our collection is
22 | an ordered set of the previously defined | class List extends Backbone.Collection
23 |
24 | model: Item
25 |
26 |
27 | class ListView extends Backbone.View
28 |
29 | el: $ 'body'
30 | |
|
| initialize: ->
33 | _.bindAll @
34 |
35 | @collection = new List
36 | @collection.bind 'add', @appendItem
37 |
38 | @counter = 0
39 | @render()
40 |
41 | render: ->
42 | $(@el).append '<button>Add List Item</button>'
43 | $(@el).append '<ul></ul>'
44 | |
|
| addItem: ->
47 | @counter++
48 | |
| Instantiate a new Item, | item = new Item |
| and modify its second part. | item.set part2: "#{item.get 'part2'} #{@counter}" |
| Then, add it to our collection. | @collection.add item
49 | |
|
| appendItem: (item) ->
51 | $('ul').append "<li>#{item.get 'part1'} #{item.get 'part2'}!</li>"
52 |
53 | events: 'click button': 'addItem'
54 |
55 |
56 | list_view = new ListView |
| Onward to Part 4 | |
Looking for the documentation?
17 | script.coffee | |
|---|---|
Using a Dedicated View for a Model | |
| We added a model and collection in the
12 | previous example, but our main application view
13 | still held the structure for our model. We'll add a dedicated view,
14 | | |
jQuery ->
16 |
17 | class Item extends Backbone.Model
18 |
19 | defaults:
20 | part1: 'Hello'
21 | part2: 'Backbone'
22 |
23 |
24 | class List extends Backbone.Collection
25 |
26 | model: Item
27 |
28 | | |
| The | class ItemView extends Backbone.View
29 | |
|
| tagName: 'li'
33 |
34 | initialize: ->
35 | _.bindAll @
36 |
37 | render: ->
38 | $(@el).html "<span>#{@model.get 'part1'} #{@model.get 'part2'}!</span>" |
| Returning | @
40 |
41 |
42 | class ListView extends Backbone.View
43 |
44 | el: $ 'body'
45 |
46 | initialize: ->
47 | _.bindAll @
48 |
49 | @collection = new List
50 | @collection.bind 'add', @appendItem
51 |
52 | @counter = 0
53 | @render()
54 |
55 | render: ->
56 | $(@el).append '<button>Add List Item</button>'
57 | $(@el).append '<ul></ul>'
58 |
59 | addItem: ->
60 | @counter++
61 | item = new Item
62 | item.set part2: "#{item.get 'part2'} #{@counter}"
63 | @collection.add item
64 | |
|
| appendItem: (item) -> |
| Instantiate a new | item_view = new ItemView model: item
66 | $('ul').append item_view.render().el
67 |
68 | events: 'click button': 'addItem'
69 |
70 |
71 | list_view = new ListView |
| Onward to Part 5 | |
Looking for the documentation?
17 | script.coffee | |
|---|---|
Adding Actions to a View12 | 13 |Our models have been pretty lifeless so far. We'll attach some actions to
14 | our | |
jQuery ->
16 |
17 | class Item extends Backbone.Model
18 |
19 | defaults:
20 | part1: 'Hello'
21 | part2: 'Backbone'
22 |
23 |
24 | class List extends Backbone.Collection
25 |
26 | model: Item
27 |
28 |
29 | class ItemView extends Backbone.View
30 |
31 | tagName: 'li'
32 | | |
|
| initialize: ->
36 | _.bindAll @
37 |
38 | @model.bind 'change', @render
39 | @model.bind 'remove', @unrender
40 | |
|
| render: =>
42 | $(@el).html """
43 | <span>#{@model.get 'part1'} #{@model.get 'part2'}!</span>
44 | <span class="swap">swap</span>
45 | <span class="delete">delete</span>
46 | """
47 | @
48 | |
|
| unrender: =>
50 | $(@el).remove()
51 | |
|
| swap: ->
54 | @model.set
55 | part1: @model.get 'part2'
56 | part2: @model.get 'part1'
57 |
58 | |
|
| remove: -> @model.destroy()
63 | |
|
| events:
64 | 'click .swap': 'swap'
65 | 'click .delete': 'remove'
66 |
67 | |
| We no longer need to modify the | class ListView extends Backbone.View
69 |
70 | el: $ 'body'
71 |
72 | initialize: ->
73 | _.bindAll @
74 |
75 | @collection = new List
76 | @collection.bind 'add', @appendItem
77 |
78 | @counter = 0
79 | @render()
80 |
81 | render: ->
82 | $(@el).append '<button>Add Item List</button>'
83 | $(@el).append '<ul></ul>'
84 |
85 | addItem: ->
86 | @counter++
87 | item = new Item
88 | item.set part2: "#{item.get 'part2'} #{@counter}"
89 | @collection.add item
90 |
91 | appendItem: (item) ->
92 | item_view = new ItemView model: item
93 | $('ul').append item_view.render().el
94 |
95 | events: 'click button': 'addItem'
96 |
97 | |
| We'll override
98 | | Backbone.sync = (method, model, success, error) ->
100 | |
| Perform a NOOP when we successfully change our model. In our example, 101 | this will happen when we remove each Item view. | success()
102 |
103 |
104 | list_view = new ListView
105 |
106 | |
Looking for the documentation?
17 |CoffeeScript, Meet Backbone.js |
29 | 30 | |
|---|---|
|
35 | CoffeeScript, Meet Backbone.js is a simple Backbone.js tutorial written in CoffeeScript comprised of self-explanatory "hello world" examples of increasing complexity. It was designed to provide a smoother transition from zero to the popular Todos example The bulk of this tutorial is a rewrite of the original hello-backbonejs tutorial. 36 |Backbone.js offers a lean MVC framework for organizing your Javascript application. It leads to more maintainable code by untangling the "spaghetti" of callbacks tied to different parts of the DOM and the backend server that often arises in rich client-side applications. 37 |The tutorial starts with a minimalist View object, and progressively introduces event binding/handling, Models, and Collections. 38 |Once in the tutorial, use the navigation menu in the top-right corner to view other examples. Example numbers are in order of increasing complexity. 39 | 40 | |
41 |
42 | The only non-Javascript part of the examples is the following HTML template (with some minimal styling): 43 |44 | <!doctype html> 45 | <html lang="en"> 46 | <head> 47 | <meta charset="utf-8"> 48 | <title>CoffeeScript, Meet Backbone.js: Part N</title> 49 | <link rel="stylesheet" href="/style.css"> 50 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 51 | <script src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script> 52 | <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script> 53 | <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script> 54 | <script src="script.js"></script> 55 | </head> 56 | <body> 57 | <header> 58 | <h1>CoffeeScript, Meet Backbone.js: Part N</h1> 59 | <p>Looking for <a href="docs/script.html">the documentation</a>?</p> 60 | </header> 61 | </body> 62 | </html> 63 |64 | |
65 |