Ractive.js Tutorial 3-2

index.html

<!-- http://learn.ractivejs.org/expressions/2 -->
 
<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>

<div id='container'></div>


<script id='template' type='text/ractive'>
<table>
	<tr>
		<th>Price per {{item}}</th>
		<th>Quantity</th>
		<th>Total</th>
	</tr>

	<tr>
		<td>{{ format(price) }}</td>
		<td>{{ quantity }}</td>
		<td>{{ format(price * quantity) }}</td>
	</tr>
</table>
</script>

Ractive.js-Tutorial-3-2.markdown

Ractive.js Tutorial 3-2

A Pen by Ken on CodePen.

License.

script.js

var ractive = new Ractive({
  el: 'container',
  template: '#template',
  data: {
    item: 'pint of milk',
    price: 0.49,
    quantity: 5,
    format: function(num) {
      if (num < 1) {
        return (100 * num) + 'p';
      }
      return '£' + num.toFixed(2);
    }
  }
});