CODEWITHSUNDEEP
javascriptruby-on-railsmodel-view-controllerember.jsjsfiddle
Koala7
Koala7

Reputation: 1404

Rendering Ember view with helpers

I have read the ember guide to achieve the same in my Ember Application, but i can't.

I am trying to configure my view with a Controller which makes a multiplication between two values

Here the code:

App.TotalView = Ember.View.extend({
 attributeBindings: ['value', 'placeholder'],
 placeholder: null,
 value: '',
 total: (function() {
    return this.get('newThread.selectContentTariffa') * this.get('newThread.primary');
    }).property('newThread.selectContentTariffa', 'newThread.primary')
});

Here in the view:

<td>{{view "total" valueBinding=newThread.value}}</td>

I can not get the result of this multiplication in this view,is this code correct? what's wrong?

You can see here: http://emberjs.jsbin.com/qakado/edit

Upvotes: 0

Views: 87

Answers (1)

melc
melc

Reputation: 11671

By only focusing on the issue you are facing and not the design and based on the code you have provided, there are the following issues and corresponding possible solutions applied to the examples at the end,

  1. there are calls to newThread but it is not defined anywhere - create a newThread in controller

  2. the view helper uses total you may either create a template and associate it with App.TotalView or use the block form of view helper - 1st example uses a template, 2nd uses block form

js

App.ThreadsController=Ember.ArrayController.extend({

   selectContentTariffa: [
     {label: "180", value: "180"},
     {label: "200", value: "200"},
     {label: "300", value: "300"}
   ],

  newThread:{
    value:null,
    selectContentTariffa:null,
    primary:null
  }


});


App.TotalView = Ember.View.extend({
  templateName:"total",
 attributeBindings: ['value', 'placeholder'],
 placeholder: null,
 value: '',
 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')
});

hbs - example1

<script type="text/x-handlebars" data-template-name="threads">
    <table class="table table-bordered table-hover">
        <tr><th>Title 1</th><th>Title 2</th><th>Title 3</th></tr>

        <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"}}</td>
        </tr>
    </table>

</script>
  <script type="text/x-handlebars" data-template-name="total">
  this is total:{{view.total}}
  </script>

hbs-example2

<script type="text/x-handlebars" data-template-name="threads">
    <table class="table table-bordered table-hover">
        <tr><th>Title 1</th><th>Title 2</th><th>Title 3</th></tr>

        <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 "App.TotalView"}}t:{{view.total}}{{/view}}</td>
        </tr>
    </table>
</script>

example1 - http://emberjs.jsbin.com/falafezijo/edit?html,js

example2 - http://emberjs.jsbin.com/cuxafigiqe/1/edit?html,js

Upvotes: 1

Related Questions