aura_components/product/main.js

main.js

define(['text!./template.html'], function(tpl) {
  var template = _.template(tpl);
  return {
    initialize: function() {
      this.render();
      this.attachEvents();

      this.sandbox.on('product.start', this.render, this);
      this.sandbox.on('product.changePrice',this.changePrice, this);
      this.sandbox.on('product.calculate',this.calculate, this);
      //this.calculateFirstProduct();
    },

    render: function() {
      this.html(template);

      // var product = _.extend({id: _.uniqueId('product')});
      // this.html(template(product));

      //_.template(this.taskTemplate, task);
    },

    attachEvents: function(){
      this.$el.find('.plus').on('click', _.bind(this.add, this));
      this.$el.find('.minus').on('click', _.bind(this.remove, this));
      this.$el.foundation();
      this.$el.find('input').floatlabel();
    },

    add: function() {
      this.$el.after(this.$el.clone(true)).fadeIn('slow');
      /*var product = _.extend({id: _.uniqueId('product')});
      var productHtml = _.template(tpl, product);
      this.$el.append(productHtml);
      this.$el.after(this.$el.clone(true));*/            
    },

    remove: function() {
      this.$el.fadeOut('slow').unbind().remove();
    },

    calculateFirstProduct: function(){
      var item = this.$el.find('.item.active');
      this.$el.find('input[name="price"]').val(item.data("price"));
      this.sandbox.emit('calculateTotalItem');
    },

    changePrice: function(item){
      this.$el.find('input[name="price"]').val(item.$el.data('aura-price'));
      this.sandbox.emit('product.calculate', item);
    },

    calculate: function(item){
      var price = this.$el.find('input[name="price"]');
      $(price).val(item.$el.data('aura-price'));

      var qty = this.$el.find('input[name="qty"]').val();
      var total = qty * parseFloat(item.$el.data('aura-price'));
      this.$el.find('.subtotal').text(total);
    }
  }
});