Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Backbone js

1,742 views

Published on

Published in: Technology, Spiritual
  • Be the first to comment

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>

×