/index.html

https://github.com/tonyto/hello-backbone · HTML · 105 lines · 84 code · 21 blank · 0 comment · 0 complexity · 1b2eb34dcfe6eecc3bd6324969b112e1 MD5 · raw file 

    

  1. <html>
    2. 

  2. 	<head>
    3. 

  3. 		<link rel='stylesheet' href='style.css'>
    4. 

  4. 		<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
    5. 

  5. 		<script type='text/javascript' src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
    6. 

  6. 		<script type='text/javascript' src="backbone.js"></script>
    7. 

  7. 		<script type='text/javascript' src="backbone-localstorage.js"></script>
    8. 

  8. 

  9.         <script>
    10. 

  10.             $(document).ready(function() {
    11. 

  11.                 window.Idea = Backbone.Model.extend({
    12. 

  12.                     defaults: function() {
    13. 

  13.                         return {
    14. 

  14.                             createdOn: new Date()
    15. 

  15.                         };
    16. 

  16.                     },
    17. 

  17.                     
    18. 

  18.                     initialize: function() {
    19. 

  19.                         console.log('hey Im new: ' + this.get('title'));
    20. 

  20.                     }
    21. 

  21.                 });
    22. 

  22.                 
    23. 

  23.                 window.IdeaList = Backbone.Collection.extend({
    24. 

  24.                     model: Idea,
    25. 

  25.                     localStorage: new Store("ideas"),
    26. 

  26.                 });
    27. 

  27.                 
    28. 

  28.                 window.Ideas = new IdeaList();
    29. 

  29.                 
    30. 

  30.                 window.ItemView = Backbone.View.extend({
    31. 

  31.                     el: $('.idea-list'),
    32. 

  32.                     
    33. 

  33.                     template: _.template($('#item_template').html()),
    34. 

  34.                     
    35. 

  35.                     initialize: function(item) {
    36. 

  36. //                        Maps.create(item);
    37. 

  37.                         this.model = item
    38. 

  38. 						
    39. 

  39. 						$('#new-idea').val('');
    40. 

  40.                         this.render();
    41. 

  41.                     },
    42. 

  42.                     
    43. 

  43.                     render: function() {
    44. 

  44.                         console.log(this.model.toJSON());
    45. 

  45.                         $(this.el).append(this.template(this.model.toJSON()));
    46. 

  46.                         return this;
    47. 

  47.                     },
    48. 

  48.                 });
    49. 

  49.                 
    50. 

  50.                 window.AppView = Backbone.View.extend({
    51. 

  51.                     el: $('#content'),
    52. 

  52.                     
    53. 

  53.                     template: _.template($('#scene_template').html()),
    54. 

  54.                     
    55. 

  55.                     initialize: function () {
    56. 

  56.                         _.bind(this, "createOnEnter");
    57. 

  57.                     },
    58. 

  58.                     
    59. 

  59.                     events: {
    60. 

  60.                         "keypress #new-idea": "createOnEnter"
    61. 

  61.                     },
    62. 

  62.                     
    63. 

  63.                     showToolTip: function(e) {
    64. 

  64.                         this.$(".ui-tooltip").removeClass('hide');
    65. 

  65.                     },
    66. 

  66.                     
    67. 

  67.                     createOnEnter: function (e) {
    68. 

  68.                         var text = $('#new-idea').val();
    69. 

  69.                         if (!text || e.keyCode != 13) return;
    70. 

  70.                         
    71. 

  71.                         var idea = new Idea({title: text});                        
    72. 

  72.                         new ItemView(idea);						
    73. 

  73.                     }
    74. 

  74.                 });
    75. 

  75.                 
    76. 

  76.                 window.App = new AppView;
    77. 

  77.             })
    78. 

  78.         </script>
    79. 

  79. 	<head>
    80. 

  80. 	<body>
    81. 

  81. 	    <h1>Idea Mapper</h1>
    82. 

  82. 	    <div id='content'>
    83. 

  83. 	        <div>
    84. 

  84. 	            <input type="text" id="new-idea" name="new-idea" placeholder="Give your idea a name"/>
    85. 

  85. 	            <span class="ui-tooltip hide"> Press enter to create this idea </span>
    86. 

  86. 	        </div>
    87. 

  87. 	        <div>
    88. 

  88. 	            <ul class='idea-list'>
    89. 

  89. 	            
    90. 

  90. 	            </ul>
    91. 

  91. 	        </div>
    92. 

  92. 	        
    93. 

  93. 	    </div>
    94. 

  94. 	    
    95. 

  95. 	    <script type='text/template' id='scene_template'>
    96. 

  96. 	        <h4>hello<h4>
    97. 

  97. 	    </script>
    98. 

  98. 	    
    99. 

  99. 	    <script type='text/template' id='item_template'>
    100. 

  100. 	        <li class="item">
    101. 

  101. 	            <%= title %>
    102. 

  102. 	        </li>
    103. 

  103. 	    </script>
    104. 

  104. 	</body>
    105. 

  105. </html>
    106.