javascript - Ember js : Multiply two numbers to get total

Question

构建一个迷你报价应用程序。 现在不使用 Ember 数据或其他任何东西，只是尝试使用原始数据。

似乎无法将两个数字相乘来获得特定项目的总计。尝试将费率和小时数相乘以获得项目总数。

我的报价 Controller 和项目 Controller :

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);
},
}    

});

Quoter.ItemController = Ember.ObjectController.extend({
    needs: ["quote"],
    getTotal: function(item) {
        return this.get('rate') * this.get('item.hours')
    }.observes('rate', 'item.hours'),
})

我的数据:

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
        }]
    }]
}

我的模板:

<script type="text/x-handlebars" data-template-name="quote">
<div class="container">
  <div class="row">
    <h1>Quote</h1>


    <h2>{{title}}</h2>
    {{input id="title" class="form-control" value=title placeholder="Add Project Title"}}

    <h3>{{customer}}</h3>
    {{input id="customer" class="form-control" value=customer placeholder="Add Customer"}}

    <label for="rate">Hourly Rate:</label> 
      {{input type="text" id="rate" class="form-control" value=rate}}

    <label for="ratio">Project Management Ratio:</label> 
    {{input type="text" id="ratio" class="form-control" value=pm_ratio}}


    <button class="btn btn-primary" {{action 'addSection'}}>Add Section</button>
    <div></div>
    {{#each section in sections}}
    <caption>{{section.sectionTitle}}</caption>
    {{input type="text" class="form-control" value=section.sectionTitle}}
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>Item Name</th>
            <th>Hours</th>
            <th>Total</th>
          </tr>
        </thead>
        {{#each item in section.items}}
        <tbody>
          <tr>
            <td>{{input type="text" value=item.title}}</td>
            <td>{{input type="text" value=item.hours}}</td>
            <td>{{getTotal}}</td>

            <td><button {{action 'removeItem' section item}}>Remove Item</button></td>
            {{/each}}
            <td><button {{action 'addItem' section}}>Add Item</button></td>                
            <td>{{totalHours}}</td>
            <td>{{totalCost}}</td>
          </tr>
        </tbody>
        {{/each}}
      </table>
  </div>
</div>

Answer 1

我想你的问题是你正在创建一个观察者，而不是一个计算属性。您有以下代码:

getTotal: function(item) {
    return this.get('rate') * this.get('item.hours')
}.observes('rate', 'item.hours')

这会将这些数字相乘，但 Ember 不会对结果执行任何操作。 (它期望观察有副作用，而不是返回值。)尝试在模板中使用它可能会产生类似 [Object object] 的内容。您需要将 observes 更改为 property。

getTotal: function(item) {
    return this.get('rate') * this.get('item.hours')
}.property('rate', 'item.hours')