title: Backbone Model Ids and on click events
body: <p>Alright. I'm going to give in here and ask for some help. I think I'm running into multiple issues and not sure of the best approach. I'm using handlebars to create an ul of li that are my json objects to backbone models. Now that the template works I want to on click get the model to be able to add to another collection. </p>
  
  <p>My first problem. I thought backbone defined a model id by default? If i set default to "" or null every model's id is "" or null. The json objects have an id I could assign to the backbone id but if I do that in the defaults id: jsonID, the jsonID is undefined. If I do object.toJSON() in the console there is no backbone created id. So I don't have a value to use in the handlebars template to assign my div id to the backbone id for that model. To then use that to get element id so that on click I could get the backbone id. Or at least I've read a lot of examples that do it that way. </p>
  
  <p>My second issue, I think stems from requirejs. All the examples I see for click even use this.collection or this.model. On my View file those always return undefined, assuming this is because of requirejs. I tried this example in particular <a href="http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/" rel="nofollow">http://lostechies.com/derickbailey/2011/10/11/backbone-js-getting-the-model-for-a-clicked-element/</a>. I'm wondering if I should just scrap using requirejs, it seems to cause more problems then help. </p>
  
  <p>Here is my code so far, I deleted out my click function code because none of it was working. </p>
  
  <p>Collection File:</p>
  
  <pre><code>define(['jquery', 'backbone', 'lodash', 'Models/GroceryItem'],
  
      function($, Backbone, _, GroceryItem) {
  
      var GroceryItems = Backbone.Collection.extend({
  
          model: GroceryItem,
  
          url: "data.json",
  
          parse: function(response) {
              return response.all_coupons;
  
          }
  
      });
  
      var storeItems = new GroceryItems();
      storeItems.fetch({
      success:function(){
          console.log(storeItems.toJSON());
          }
      });
  
      return storeItems;
  
  });
  </code></pre>
  
  <p>View File:</p>
  
  <pre><code>define(['jquery', 'backbone', 'lodash', 'handlebars', 'Collections/GroceryItems'],
  
      function($, Backbone, _, Handlebars, storeItems) {
  
  
  
      var GroceryItemsView = Backbone.View.extend({
  
          template: Handlebars.compile(
              '&lt;ul class="d-row"&gt;' +
                      '{{#each storeItems}}' +
                          '&lt;li class="lineItem" id="{{coupon_id}}"&gt;' +    
                              '&lt;div class="wrapper"&gt;' +
                                  '&lt;div class="header"&gt;{{coupon_title}}&lt;/div&gt;' +              
                                      '&lt;div class="column_wrapper"&gt;' +
                                          '&lt;div class="two-col"&gt;' +
                                              '&lt;div class="product_image"&gt;&lt;img src="{{coupon_thumb}}" alt="{{coupon_description}}" height="110" width="110"&gt;&lt;/div&gt;' +
                                              '&lt;div class="description"&gt;{{coupon_description}}&lt;/div&gt;' +
                                           '&lt;/div&gt;' +
                                      '&lt;/div&gt;' +
                                  '&lt;div class="expiration"&gt;Valid From: {{valid_from}} to {{valid_to}}&lt;/div&gt;' +    
                              '&lt;/div&gt;' +
                          '&lt;/li&gt;' +
                  '{{/each}}' +
              '&lt;/ul&gt;'
              ),
  
          events: {
              "click li": "getModel"
          },
  
          getModel:function(e){
  
          },
  
          render: function() {
              var that = this;
              storeItems.fetch({
                  success: function(storeItems) {
                      var storeTemplate = that.template({storeItems: storeItems.toJSON()});
                      that.$el.html(storeTemplate);
                      return that;
                  }
              })          
              return this; 
          }
      });
  
      return GroceryItemsView;
  
  });
  </code></pre>
  
  <p>Thanks a bunch for any help. It's much appreciated. If I'm going at this completely wrong, I'm open to any suggestions. I'm just learning backbone and javascript in general so I'm grinding away as I go with a lot of googling. </p>
  
  <p>Thanks!</p>
  
  <p>EDITED CODE:</p>
  
  <pre><code>define(['jquery', 'backbone', 'lodash', 'Collections/GroceryItems', 'Views/GroceryItemView'],
  
      function($, Backbone, _, storeItems, GroceryItemView) {
  
      var GroceryItemsView = Backbone.View.extend({
  
          tagName: 'ul',
          className: 'd-row',
          el: '#container',
          initialize: function () {
              //basically says only render when collection syncs
              this.listenTo(storeItems, 'sync', this.render);
          },
  
          render: function () {
              //got keep track of views for when you need close them (not important for now but you'll thank me later)
              this.groceryItemsView = [];
              storeItems.each(function (GroceryItem) {
                  //we are making a new view for each model and passing it in as an option
                  var itemView = new GroceryItemView({
                      model: GroceryItem
                  });
                  //The view creates an element but it is not attached to DOM. We will attach it to the ItemsView's $el (which IS attached to the DOM)
                  this.$el.append(itemView.$el);
  
                  this.groceryItemsView.push(itemView);
              }, this);
              }
          });
  
      var list = new GroceryItemsView();
  
      return list;
  
  });
  
  define(['jquery', 'backbone', 'lodash', 'handlebars', 'Views/GroceryItemsView', 'Models/GroceryItem'],
  
      function($, Backbone, _, Handlebars, GroceryItemsView, GroceryItem) {
  
          var GroceryItemView = Backbone.View.extend({
  
          template: Handlebars.compile(
              '&lt;div class="wrapper"&gt;' +
                  '&lt;div class="header"&gt;{{coupon_title}}&lt;/div&gt;' +
                      '&lt;div class="column_wrapper"&gt;' +
                          '&lt;div class="two-col"&gt;' +
                              '&lt;div class="product_image"&gt;&lt;img src="{{coupon_thumb}}" alt="{{coupon_description}}" height="110" width="110"&gt;&lt;/div&gt;' +
                              '&lt;div class="description"&gt;{{coupon_description}}&lt;/div&gt;' +
                          '&lt;/div&gt;' +
                      '&lt;/div&gt;' +
                  '&lt;div class="expiration"&gt;Valid From: {{valid_from}} to {{valid_to}}&lt;/div&gt;' +
              '&lt;/div&gt;'
          ),
  
          tagName: 'li',
  
          className: 'lineItem',
  
          events: {
              'click': 'getModel'
          },
  
          initialize: function () {
             this.render();
          },
  
          getModel: function () {
              return this.model;
          },
  
          render: function () {
              this.$el.html(this.template(this.model.toJSON()));
          }
      });
  
      return GroceryItemView;
  });
  </code></pre>