JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<main></main>

JavaScript

var binding = new Ractive({
  el: 'main',
  template: '{{#each log}}<p>{{this}}</p>{{/each}}',
  data: {
    items: [
      {
        finished: false
      },
      {
        finished: false
      }  
    ],
    log: []
  }
});

binding.push( 'log', 'init complete' );

binding.observe('items.*.finished', (n,o,k,index) => {
  binding.push( 'log', `${k} (index ${index}) changed from ${o} to ${n}` );  
}); // add `, { init: false }` if necessary

binding.push( 'log', 'observer set up' );

binding.set('items[0].finished', true);
binding.set('items[1].finished', true);