title: Ember js: Multiply two numbers to get total
body: <p>Building a mini quoting application.
  Not using Ember data or anything else right now, just trying to work with the raw data.</p>
  
  <p>Can't seem to multiply two numbers together to get a total for a specific item. Trying to multiply the rate and hours together to get the items total amount.</p>
  
  <p>My quote controller and item controller:</p>
  
  <pre><code>Quoter.QuoteController = Ember.ObjectController.extend({
  actions: {
      addSection: function(){
          var sectionTitle = "Section 3"
          var new_section = {sectionTitle: sectionTitle, items: []};
          quote.sections.pushObject(new_section);
      },
      addItem: function(section){
          var name = "Item"
          var hours = 20
          var total = 100
          var new_item = {title: name, hours: hours, total: total};
          section.items.pushObject(new_item);
      },
      pmRatio: function(){
          ratio = this.get('ratio');
  
      },
      removeSection: function(section){
      quote.sections.removeObject(section);
  },
      removeItem: function(section, item){
      section.items.removeObject(item);
  },
  }    
  </code></pre>
  
  <p>});</p>
  
  <pre><code>Quoter.ItemController = Ember.ObjectController.extend({
      needs: ["quote"],
      getTotal: function(item) {
          return this.get('rate') * this.get('item.hours')
      }.observes('rate', 'item.hours'),
  })
  </code></pre>
  
  <p>My data:</p>
  
  <pre><code>var quote =
  {
      id: 1,
      title: "Project",
      customer: "Customer",
      rate: 105,
      pm_ratio: 0.2,
      sections: [
      {
          sectionTitle: "Section 1",
          items: [
          {
              title: "Item 1",
              hours: 10,
              total: 100
          },
          {
              title: "Item 2",
              hours: 6,
              total: 100
  
          }]
      },
      {
          sectionTitle: "Section 2",
          items: [
          {
              title: "Item 1",
              hours: 10,
              total: 100
  
          },
          {
              title: "Item 2",
              hours: 6,
              total: 100
          }]
      }]
  }
  </code></pre>
  
  <p>My template:</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="quote"&gt;
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;h1&gt;Quote&lt;/h1&gt;
  
  
      &lt;h2&gt;{{title}}&lt;/h2&gt;
      {{input id="title" class="form-control" value=title placeholder="Add Project Title"}}
  
      &lt;h3&gt;{{customer}}&lt;/h3&gt;
      {{input id="customer" class="form-control" value=customer placeholder="Add Customer"}}
  
      &lt;label for="rate"&gt;Hourly Rate:&lt;/label&gt; 
        {{input type="text" id="rate" class="form-control" value=rate}}
  
      &lt;label for="ratio"&gt;Project Management Ratio:&lt;/label&gt; 
      {{input type="text" id="ratio" class="form-control" value=pm_ratio}}
  
  
      &lt;button class="btn btn-primary" {{action 'addSection'}}&gt;Add Section&lt;/button&gt;
      &lt;div&gt;&lt;/div&gt;
      {{#each section in sections}}
      &lt;caption&gt;{{section.sectionTitle}}&lt;/caption&gt;
      {{input type="text" class="form-control" value=section.sectionTitle}}
        &lt;table class="table table-bordered"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;Item Name&lt;/th&gt;
              &lt;th&gt;Hours&lt;/th&gt;
              &lt;th&gt;Total&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          {{#each item in section.items}}
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;{{input type="text" value=item.title}}&lt;/td&gt;
              &lt;td&gt;{{input type="text" value=item.hours}}&lt;/td&gt;
              &lt;td&gt;{{getTotal}}&lt;/td&gt;
  
              &lt;td&gt;&lt;button {{action 'removeItem' section item}}&gt;Remove Item&lt;/button&gt;&lt;/td&gt;
              {{/each}}
              &lt;td&gt;&lt;button {{action 'addItem' section}}&gt;Add Item&lt;/button&gt;&lt;/td&gt;                
              &lt;td&gt;{{totalHours}}&lt;/td&gt;
              &lt;td&gt;{{totalCost}}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
          {{/each}}
        &lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>