milardovich

Backbone Problem II

Jul 31st, 2014
238
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.10 KB | None | 0 0
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Testing Backbone</title>
  6.     <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
  7.     <link rel="stylesheet" href="vendor/bootstrap/dist/css/bootstrap.min.css">
  8.     <link rel="stylesheet" href="css/main.css">
  9.  
  10.     <style>
  11.         body {
  12.             font-family: 'Open Sans', Arial;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17. <!-- Begin page content -->
  18. <div class="container">
  19.     <div class="page-header">
  20.         <h1>Books</h1>
  21.     </div>
  22.  
  23.     <div id="app"></div>
  24.  
  25.     <!-- Books list template -->
  26.     <script type="text/template" id="books-main-list">
  27.     <div class="row">
  28.         <% _.each(books, function(book) { %>
  29.         <div class="col-lg-6">
  30.             <h4><%= book.title %></h4>
  31.             <p align="center"><img src="data/img/<%= book.thumbnail %>" class="thumbnail" />Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
  32.         </div>
  33.         <% }); %>
  34.     </div>
  35.     </script>
  36. </div>
  37.  
  38. <div class="footer">
  39.     <div class="container">
  40.         <p class="text-muted">Footer</p>
  41.     </div>
  42. </div>
  43.  
  44. <script type="text/javascript" src="vendor/jquery/dist/jquery.min.js"></script>
  45. <script type="text/javascript" src="vendor/bootstrap/dist/js/bootstrap.min.js"></script>
  46. <script type="text/javascript" src="vendor/underscore/underscore.js"></script>
  47. <script type="text/javascript" src="vendor/backbone/backbone.js"></script>
  48.  
  49. <script type="text/javascript">
  50.     var Book = Backbone.Model.extend({});
  51.     var BooksCollection = Backbone.Collection.extend({
  52.         model: Book,
  53.         url: 'data/db.json'
  54.     });
  55.     var books = new BooksCollection();
  56.  
  57.     var BookListView = Backbone.View.extend({
  58.         el: '#app',
  59.  
  60.         initialize:function(){
  61.  
  62.             books.fetch();
  63.         },
  64.         render: function(books) {
  65.             var view = new ShowBooksView({books: books });
  66.             $('.libros').append(view.render().$el)
  67.         }
  68.     });
  69.  
  70.     var bookList = new BookListView();
  71. </script>
  72. </body>
  73. </html>
Advertisement
Add Comment
Please, Sign In to add comment