Ractive.js Tutorial 1-4

index.html

<!-- http://learn.ractivejs.org/hello-world/4 -->

<script src='http://cdn.ractivejs.org/latest/ractive.min.js'></script>

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

<script id='template' type='text/ractive'>
  <p style='color: {{color}}; font-size: {{size}}em; font-family: {{font}};'>{{greeting}} {{name}}!</p>
</script>

Ractive.js-Tutorial-1-4.markdown

Ractive.js Tutorial 1-4

A Pen by Ken on CodePen.

License.

script.js

var ractive = new Ractive({
  el: 'container',
  template: '#template',
  data: {
    greeting: 'Hello',
    name: 'world',
    color: 'purple',
    size: 4,
    font: 'Georgia'
  }
});

ractive.set({
  color: 'red',
  font: 'Comic Sans MS'
})