ValueBinding not working on adding new Object in my Ember view

Question

I have an Input field type number where the result of the multiplication of two values is displayed.

I have set the total function which is my valueBinding in the html

Here my Ember.View.extend with the total calculation

App.TotalView = Ember.View.extend({
 templateName: 'total',
 tagName: 'input',
 attributeBindings: ['total:value', 'placeholder', 'type'],
 placeholder: null,
 type: 'number',
 total: (function() {
    var res= parseInt(this.get('controller.newThread.selectContentTariffa')) * parseInt(this.get('controller.newThread.primary'));
    return isNaN(res)?"":res;
 }).property('controller.newThread.selectContentTariffa', 'controller.newThread.primary')
});

I have defined the calls to my NewThread

 newThread:function(){
    return {selectContentTariffa:null,primary:null,total:null,weight:null};
 }.property(),

This is my html when i select the values for the calculation: valueBinding=newThread.selectContentTariffa, valueBinding=newThread.primary and valueBinding=newThread.total for the total result

    <tr>
      <td>{{view Ember.Select 
                 prompt="Tariffa" 
                 valueBinding=newThread.selectContentTariffa
                 content=selectContentTariffa
                 optionValuePath="content.value"
                 optionLabelPath="content.label"}}
      </td>
      <td>{{view Em.TextField
                 type="number"
                 valueBinding=newThread.primary
                 class="form-control"}}
      </td>
      <td>{{view "total" valueBinding=newThread.total}}</td>
      <td><button class="btn btn-success" {{action add item}}>Add</button></td>
    </tr>

  <script type="text/x-handlebars" data-template-name="total">
    {{view.total valueBinding=newThread.total}}
  </script>

This my html where there are the values displayed after i have added them

{{#each item in model}}        
    <tr>
          <td>{{item.selectContentTariffa}}</td>
          <td>{{item.primary}}</td>
          <td>{{item.total}}</td>
        </tr>
{{/each}}

i dont't know what i am missing, i have reproduced the issue here : http://emberjs.jsbin.com/qakado/13/edit?html as you can see the value of the result in the last column under is not bound

Answer 1

The total property of the object assigned to the newThread property is never set with the result. So an approach could be to make the total property a calculated property and carry out the multiplication there. Then display that property within the view.

http://emberjs.jsbin.com/vivohiyefu/1/edit?html,js