1. backbone.js + rails getting started guide by Yury Omelchuk (c) 2012

2. ____ _ _ _ | _ | | | | (_) | |_) | __ _ ___| | __| |__ ___ _ __ ___ _ ___ | _ < / _` |/ __| |/ /| '_ / _ '_ / _ | / __| | |_) | (_| | (__| < | |_) | (_) | | | | __/_| _ |____/ _,_|__|_|_.__/ __/|_| |_|__(_) |___/ _/ | |__/ (_'___________________________________________________'_) (_.———————————————————————————————————————————————————._)

3. Jeremy Ashkenas, DocumentCloud Inc. http://documentcloud.github.com/backbone 41kb 13.8kb, packed 4.6kb gzipped

5. Knockout.js

6. Batman.js

7. Spine.js

9. Model

10. Collection

11. View

12. History

13. Events

14. Sync

15. Utility

17. assets/

18. javascripts/

19. collections/

20. movies.js

21. models/

22. movie.js

23. routers/

24. movies_router.js

25. views/

26. todos/

27. todos_index.js

28. templates/

29. movies/

30. index.jst.ejs

31. show.jst.ejs

32. movie.jst,ejs

34. //= require jquery_ujs

35. //= require twitter/bootstrap

36. //= require underscore

37. //= require backbone

38. //= require app

39. //= require_tree ./models

40. //= require_tree ./collections

41. //= require_tree ./views

42. //= require_tree ./routers

43. //= require_tree ../templates

44. //= require_tree .

46. <%= yield :javascript %>

47. <div id=”app”></div>

49. <%= javascript_tag do %>

50. App.init();

51. <% end %>

52. <% end -%>

54. Models: {},

55. Collections: {},

56. Views: {},

57. Routers: {},

58. init: function() {

59. new App.Routers.Movies();

60. Backbone.history.start();

61. }

62. };

64. routes: {

65. &quot;&quot;: &quot;index&quot;,

66. },

67. index: function() {

68. var movies = new Movies;

69. movies.fetch({

70. success: function() {

71. new App.Views.Index( {collection: movies} )

72. }

73. })

74. }

75. }

77. model: Movie,

78. url: '/movies'

79. });

81. _.bindAll(this, 'render');

82. this.collection.bind('change', this.render);

83. this.render();

84. },

85. render: function() {

86. $(this.el).html(JST['movies/index']( {collection: this.collection }));

87. $('#app').html(this.el);

88. }

89. });

91. <% collection.each(function(item, key, list) { %>

92. <div class=&quot;row&quot;>

93. <div class=&quot;span16 movie&quot;>

94. <h3>

95. <a href=&quot;#movie/<%= item.id %>&quot;><%= item.escape('title') %></a>

96. </h3>

97. <%= item.get('description') %>

98. </div>

99. </div>

100. <% }); %>

101. <% } else { %>

102. <p>no movies</p>

103. <% } %>

105. context &quot;no data&quot; do

106. specify &quot;homepage&quot; do

107. visit '/'

108. page.should have_content 'no movies'

109. end

110. end

111. context &quot;with existing data&quot; do

112. before { @movie = Factory :movie, title: 'Pulpfiction' }

113. specify &quot;homepage with data&quot; do

114. visit '/'

115. page.should have_content 'Pulpfiction'

116. end

117. end

118. end