41256

Ractive computed property

Question:

I've got a simple test application using firebase with the following template and model in ractive. I want to access the price value in the computed newprice to format it to look like currency with 2 decimal places. I can't figure out though how to get at the .price value which displays fine in the output but nothing I've tried seems to be able to see .price inside the computed. The call to newprice works fine as I can just return text and see it in the output. The reason it am using .price is that the returned data from firebase has each make,model,price wrapped in a unique autogenerated id so I see a top level object with each entry id and the data within as an object with make,model,price.

<script id='template' type='text/ractive'> {{#each listdata:i}}

{{ .make }} {{ .model }}{{.price}} ${{ newprice() }}!

{{/each}} </script> <script> var ractive = new Ractive({ // The `el` option can be a node, an ID, or a CSS selector. el: 'container', // We could pass in a string, but for the sake of convenience // we're passing the ID of the <script> tag above. template: '#template', computed: { newprice: function() { // CAN'T FIGURE OUT WHAT TO DO HERE TO SEE price return ; } } }); </script>

Need some direction on how to get to .price value.

Answer1:

Computed properties are referenced as properties, not functions. And, more importantly, are "absolute" keypaths so they won't work against a collection. To get this to work you have two options:

<h3>Use a data function</h3>

Instead of a computed property, use a data function:

<script id='template' type='text/ractive'> {{#each listdata:i}}

{{ .make }} {{ .model }}{{.price}} ${{ newprice(.price) }}!

{{/each}} </script> <script> var ractive = new Ractive({ el: 'container', template: '#template', data: { newprice: function(price) { return price + 1; }, // other data } }); </script>

You may find it more convientent to place the helper function "globally":

Ractive.defaults.data.newprice = function(price){...}

If you have an existing/favorite library, you can also use this technique and access methods inline in your template

<script src="path/to/accounting.js"></script> Ractive.defaults.data.accounting = accounting

{{ .make }} {{ .model }}{{.price}} ${{ accounting.formatMoney(.price) }}!

<h3>Use a computed property, but at the component level</h3>

Use a component to render each item and then the computed property will be per item:

<script id='template' type='text/ractive'> {{#each listdata:i}} <line/> {{/each}} </script> <script id='line' type='text/ractive'>

{{ make }} {{ model }}{{price}} ${{ newprice }}!

</script> <script> Ractive.components.line = Ractive.extend({ template: '#line', computed : { newprice: function(){ return this.get('price') } } }) var ractive = new Ractive({ el: 'container', template: '#template', }); </script>

Answer2:

Computed properties apply to the whole template - in other words there's no listdata[0].newprice and so on in the example above, only one newprice.

Instead, you need to create a function that Ractive can access from inside the template, and pass the old price into it:

<!-- language: lang-html --> {{#each listdata:i}}

{{ .make }} {{ .model }}: {{.price}} -> ${{ newprice( .price ) }}!

{{/each}} <!-- language: lang-js --> var ractive = new Ractive({ el: 'main', template: '#template', data: { listdata: [ { make: 'Toyota', model: 'Prius', price: 25000 }, { make: 'Dodge', model: 'Challenger', price: 30000 }, { make: 'Jeep', model: 'Grand Cherokee', price: 35000 }, { make: 'Bugatti', model: 'Veyron', price: 2000000 } ], discount: 0.1, newprice: function ( oldprice ) { return oldprice * ( 1 - this.get( 'discount' ) ); } } });

Here's a JSFiddle to demonstrate: <a href="http://jsfiddle.net/rich_harris/nsnhwobg/" rel="nofollow">http://jsfiddle.net/rich_harris/nsnhwobg/</a>

Recommend

  • yii2 how to add additional attributes to dropDownList() elements?
  • c# datagridview red cross
  • var query not returning required results
  • Matrix problem Python
  • Grouping vars in function
  • Click button with javascript
  • set operation within a list column
  • Copying rows in a database when rows have children
  • Receive list of elements in their visual order
  • Can't compile Arduino CapSense example
  • Want to understand iframe breakout code
  • Selectively hide background elements when overlayed with transparent div
  • Enumerating Controls on a Form
  • PayPal API Listener Website Payments Standard URI
  • Why isn't obj.style.left = “200px”; working in this code?
  • CakePHP ACL tutorial initDB function warnings
  • Installed module is empty
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Google Custom Search with transparent background
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • How to make a tree having multiple type of nodes and each node can have multiple child nodes in java
  • Can Jackson SerializationFeature be overridden per field or class?
  • vba code to select only visible cells in specific column except heading
  • Redux, normalised entities and lodash merge
  • How to delete a row from a dynamic generate table using jquery?
  • Android Studio and gradle
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • using HTMLImports.whenReady not working in chrome
  • How do I configure my settings file to work with unit tests?
  • Authorize attributes not working in MVC 4
  • Is it possible to post an object from jquery to bottle.py?
  • EntityFramework adding new object to nested object collection
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • Observable and ngFor in Angular 2
  • How can i traverse a binary tree from right to left in java?
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • To Get the radio button value in ruby on rails