<div id="order-products" class="order-products">
  <% order.products.each do |product| %>
    <div class="line-keeper">
      <%= render :partial => "distribution_plugin_ordered_product/edit", :locals => {:ordered_product => product, :product => product.product} %>
    </div>
  <% end %>
</div>

<div id="res-order-products" class="order-products">
</div>

<script id="tmpl-order-products" type="text/html">
  <div>
    <# _.each(products, function (product) { #>
      <span> color <# product.product.name #> </span>
    <# }); #>
  </div>
</script>

<% javascript_tag do %>
  var App = {
    Views: {},
    Controllers: {},
    init: function() {
      var controller = new App.Controllers.OrderedProducts();
      controller.index();
      //Backbone.history.start();
    }
  };

  var OrderedProduct = Backbone.Model.extend({
    url : function() {
      return "<%= url_for({:controller => :distribution_plugin_ordered_product }) %>";
    }
  });

  App.Views.Index = Backbone.View.extend({
    initialize: function() {
      this.products = this.options.products;
      this.render();
    },

    render: function() {
      jQuery("#res-order-products").html(
        _.template(jQuery("#tmpl-order-products").text(), {products: this.products}));
    },
  });

  App.Controllers.OrderedProducts = Backbone.Router.extend({
    index: function() {
      var data = <%= order.products.all.to_json :include => :product %>;
      var p = _(data).map(function(i) { return new OrderedProduct(i); });
      new App.Views.Index({ products: p });
    },
  });

  App.init();

<% end %>