Ractive.js Tutorial 2-3

index.html

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

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


<script id='template' type='text/ractive'>
<h2>Country profile</h2>

{{#with country}}
  <p>{{name}} is a {{climate.temperature}} country with {{climate.rainfall}} rainfall and a population of {{population}}.</p>

  {{#with capital}}
    <p>The capital city is {{name}} (<a href='https://maps.google.co.uk/maps/place/{{name}}/@{{lat}},{{lon}},12z' target='_blank'>see map</a>).</p>
  {{/with}}

{{/with}}
  
{{#country}}
  '#' instead of 'with'.
{{/country}}
</script>

Ractive.js-Tutorial-2-3.markdown

Ractive.js Tutorial 2-3

A Pen by Ken on CodePen.

License.

script.js

var ractive = new Ractive({
  el: 'container',
  template: '#template',
  data: {
    country: {
      name: 'The UK',
      climate: { temperature: 'cold', rainfall: 'excessive' },
      population: 63230000,
      capital: { name: 'London', lat: 51.5171, lon: -0.1062 }
    }
  }
});

var country = ractive.get('country');
country.climate.rainfall = 'very high';
ractive.update('country');

// same as...
//ractive.set('country.climate.rainfall', 'very high');