JSFiddle - React, Tailwind, and code Playground

by rich_harris

HTML

<div id="container"></div>

JavaScript

var myTemplate = "{{#( sort( list, 'name' ) )}} <p>{{name}}</p> {{/()}}";
var myContainer = document.getElementById("container");
var list = [{ name: 'Bob' }, { name: 'Charles' }, { name: 'Alice' }];
var ractive = new Ractive({
  el: myContainer,
  template: myTemplate,
  magic: true,
  data: {
    list: list,
    sort: function ( list, property ) {
      return list.slice().sort( function ( a, b ) {
        return a[ property ] < b[ property ] ? -1 : 1;
      });
    }
  }
});
//ractive.set('list[0].name', "Foobar");
list[0].name = "Foo";