0
backbone.js + rails getting started guide by Yury Omelchuk (c) 2012
____  _  _  _  |  _   | |  | |  (_)  | |_) | __ _  ___| | __| |__  ___  _ __  ___  _ ___  |  _ < / _` |/ __| |/ /| '_  / _...
Jeremy Ashkenas, DocumentCloud Inc. http://documentcloud.github.com/backbone 41kb 13.8kb, packed  4.6kb gzipped
alternatives <ul><li>SproutCore 2 / Ember.js
Knockout.js
Batman.js
Spine.js </li></ul>
components <ul><li>Router
Model
Collection
View
History
Events
Sync
Utility </li></ul>
Upcoming SlideShare
Loading in...5
×

Backbone js

1,550

Published on

Published in: Technology, Spiritual
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,550
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Backbone js"

  1. 1. backbone.js + rails getting started guide by Yury Omelchuk (c) 2012
  2. 2. ____ _ _ _ | _ | | | | (_) | |_) | __ _ ___| | __| |__ ___ _ __ ___ _ ___ | _ < / _` |/ __| |/ /| '_ / _ | '_ / _ | / __| | |_) | (_| | (__| < | |_) | (_) | | | | __/_| __ |____/ __,_|___|_|_|_.__/ ___/|_| |_|___(_) |___/ _/ | |__/ (_'___________________________________________________'_) (_.———————————————————————————————————————————————————._)
  3. 3. Jeremy Ashkenas, DocumentCloud Inc. http://documentcloud.github.com/backbone 41kb 13.8kb, packed 4.6kb gzipped
  4. 4. alternatives <ul><li>SproutCore 2 / Ember.js
  5. 5. Knockout.js
  6. 6. Batman.js
  7. 7. Spine.js </li></ul>
  8. 8. components <ul><li>Router
  9. 9. Model
  10. 10. Collection
  11. 11. View
  12. 12. History
  13. 13. Events
  14. 14. Sync
  15. 15. Utility </li></ul>
  16. 16. rails integration <ul><li>app/
  17. 17. assets/
  18. 18. javascripts/
  19. 19. collections/
  20. 20. movies.js
  21. 21. models/
  22. 22. movie.js
  23. 23. routers/
  24. 24. movies_router.js
  25. 25. views/
  26. 26. todos/
  27. 27. todos_index.js
  28. 28. templates/
  29. 29. movies/
  30. 30. index.jst.ejs
  31. 31. show.jst.ejs
  32. 32. movie.jst,ejs </li></ul>
  33. 33. application.js <ul><li>//= require jquery
  34. 34. //= require jquery_ujs
  35. 35. //= require twitter/bootstrap
  36. 36. //= require underscore
  37. 37. //= require backbone
  38. 38. //= require app
  39. 39. //= require_tree ./models
  40. 40. //= require_tree ./collections
  41. 41. //= require_tree ./views
  42. 42. //= require_tree ./routers
  43. 43. //= require_tree ../templates
  44. 44. //= require_tree . </li></ul>
  45. 45. layout <ul><li>views/layouts/application.html.erb
  46. 46. <%= yield :javascript %>
  47. 47. <div id=”app”></div>
  48. 48. views/main/index.html.erb </li><ul><li><%= content_for :javascript do -%>
  49. 49. <%= javascript_tag do %>
  50. 50. App.init();
  51. 51. <% end %>
  52. 52. <% end -%> </li></ul></ul>
  53. 53. app.js <ul><li>var App = {
  54. 54. Models: {},
  55. 55. Collections: {},
  56. 56. Views: {},
  57. 57. Routers: {},
  58. 58. init: function() {
  59. 59. new App.Routers.Movies();
  60. 60. Backbone.history.start();
  61. 61. }
  62. 62. }; </li></ul>
  63. 63. router <ul><li>App.Routers.Movies = Backbone.Router.extend({
  64. 64. routes: {
  65. 65. &quot;&quot;: &quot;index&quot;,
  66. 66. },
  67. 67. index: function() {
  68. 68. var movies = new Movies;
  69. 69. movies.fetch({
  70. 70. success: function() {
  71. 71. new App.Views.Index( {collection: movies} )
  72. 72. }
  73. 73. })
  74. 74. }
  75. 75. } </li></ul>
  76. 76. collection <ul><li>Movies = Backbone.Collection.extend({
  77. 77. model: Movie,
  78. 78. url: '/movies'
  79. 79. }); </li></ul>
  80. 80. view <ul>App.Views.Index = Backbone.View.extend({ <li>initialize: function() {
  81. 81. _.bindAll(this, 'render');
  82. 82. this.collection.bind('change', this.render);
  83. 83. this.render();
  84. 84. },
  85. 85. render: function() {
  86. 86. $(this.el).html(JST['movies/index']( {collection: this.collection }));
  87. 87. $('#app').html(this.el);
  88. 88. }
  89. 89. }); </li></ul>
  90. 90. template <ul><li><% if (collection.models.length > 0) { %>
  91. 91. <% collection.each(function(item, key, list) { %>
  92. 92. <div class=&quot;row&quot;>
  93. 93. <div class=&quot;span16 movie&quot;>
  94. 94. <h3>
  95. 95. <a href=&quot;#movie/<%= item.id %>&quot;><%= item.escape('title') %></a>
  96. 96. </h3>
  97. 97. <%= item.get('description') %>
  98. 98. </div>
  99. 99. </div>
  100. 100. <% }); %>
  101. 101. <% } else { %>
  102. 102. <p>no movies</p>
  103. 103. <% } %> </li></ul>
  104. 104. test! <ul><li>describe &quot;Backbone&quot;, :js do
  105. 105. context &quot;no data&quot; do
  106. 106. specify &quot;homepage&quot; do
  107. 107. visit '/'
  108. 108. page.should have_content 'no movies'
  109. 109. end
  110. 110. end
  111. 111. context &quot;with existing data&quot; do
  112. 112. before { @movie = Factory :movie, title: 'Pulpfiction' }
  113. 113. specify &quot;homepage with data&quot; do
  114. 114. visit '/'
  115. 115. page.should have_content 'Pulpfiction'
  116. 116. end
  117. 117. end
  118. 118. end </li></ul>
  119. 119. carry on <ul><li>http://github.com/jurgens/backbone-demo </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×