Ractive object new key/overwrite key

Understanding nature of ractive.set

by vikikamath

HTML

<main></main>

<script id="details" type="text/ractive">
	
</script>

<script id="template" type="text/ractive">
	<ul>
	{{#countries: code}}
  <li>
  	{{>details}}
  </li>
  	
  {{/countries}}
  </ul>
  
  {{#partial details}}
		<div>{{code}}</div>
  	<ul>
    	{{#.: key}}
  		<li>{{code}}- {{key}}: {{.}}
      </li>
      {{/.}}
  	</ul>
  {{/partial}}
</script>

JavaScript

ractive = new Ractive({
  el: 'main',
  template: '#template',
  data: {
    countries: {
      GBR: { name: 'United Kingdom', population: '18Mil', favoriteSport: 'Cricket' },
      USA: { name: 'United States', population: '350Mil', favoriteSport: 'Football' },
      FRA: { name: 'France', population: '20Mil', favoriteSport: 'Soccer'}
    }
  }
});

// new Element
ractive.set('countries.BRA', { name: 'United Kingdom', population: '18Mil', favoriteSport: 'Cricket' })