title: How to display the product details when clicked from the list of products
body: <p>I am trying to build a backbone.js app with Ruby on Rails on the server side.</p>
  
  <p>I am able to get the list of products and that looks great.</p>
  
  <p>Next task is to display the product details when a user clicks on the product. As per my code when I click on a product I then get an alert message "<strong>/products/20.json</strong>". </p>
  
  <p>Question: Do I need to manually make an ajax call using jQuery or should backbone.js help me get the value for this product given that Backbone.js is REST compliant?</p>
  
  <pre><code>$(function(){
  
    window.Product = Backbone.Model.extend({
      defaults: { name: 'name missing' },
      urlRoot: '/product'
    });
  
    window.ProductList = Backbone.Collection.extend({
      model: Product,
      url: '/products.json'
    });
  
    window.ProductViewForListing = Backbone.View.extend({
      initialize: function() {
        this.template = $('#productTmplForListing').template(),
        _.bindAll(this, 'render');
      },
      className: 'product',
      render: function(){
        var fragment = $.tmpl(this.template, this.model.toJSON());
        $(this.el).html(fragment);
        return this;
      }
    });
  
    window.ProductViewForShow = Backbone.View.extend({
      el: $('#main'),
      initialize: function(){
        _.bindAll(this, 'render');
        this.render();
      },
      render: function(){
        self.el.append($('Hello world'));
      }
    });
  
    window.AppView = Backbone.View.extend({
      el: $('#products'),
      events: {
        "click .product": "showProduct"
      },
      initialize: function(){
        _.bindAll(this, 'render');
        this.render();
      },
      render: function(){
        var self = this;
        this.collection.each(function(product){
          var view = new ProductViewForListing({model: product});
          self.el.append(view.render().el);
        });
      },
      showProduct: function(e){
                     console.log(e);
        var href = $(e.target).closest('.product').find('a').attr('href');
        alert(href);
      }
    });
  
    var products = new ProductList();
    products.fetch({
      success: function() {
        new AppView({ collection: products });
      }
    });
  
  });
  
  
  
  
  &lt;script type="text/x-jquery-tmpl" id="productTmplForListing"&gt;
    &lt;a href="/products/${id}.json"&gt;
      &lt;img alt="${name}" class="productImage" height="190" src="/system/pictures/${id}/thumbnail/${picture_file_name}" width="190" /&gt;
      &lt;/a&gt;
      &lt;p class="productName"&gt;
        &lt;a href="/products/${id}.json"&gt;
          ${name}
        &lt;/a&gt;
      &lt;/p&gt;
      &lt;p class="productPrice"&gt;
        ${price}
      &lt;/p&gt;
    &lt;/script&gt;
  </code></pre>