Ractive.js Tutorial 3-3

index.html

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

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


<script id='template' type='text/ractive'>
<p>red:</p>
<div style='background-color: red; width: {{red * 100}}%;'></div>

<p>green:</p>
<div style='background-color: green; width: {{green * 100}}%;'></div>

<p>blue:</p>
<div style='background-color: blue; width: {{blue * 100}}%;'></div>

<p><strong>result:</strong></p>
<div style='background-color: rgb({{Math.round(red * 255)}}, {{Math.round(green * 255)}}, {{Math.round(blue  * 255)}})'>
</div>
</script>

Ractive.js-Tutorial-3-3.markdown

Ractive.js Tutorial 3-3

A Pen by Ken on CodePen.

License.

script.js

var ractive = new Ractive({
  el: 'container',
  template: '#template',
  data: {
    red: 0.45,
    green: 0.61,
    blue: 0.2
  }
});

// ractive.set('red', 1);