Ractive.js

by example

Created by Alan Palazzolo

ractivejs.org

zzolo.org/ractive-js-example-presentation

What is Ractive.js?

Data binding,

DOM updates,

Event handling

Model-View-Controller

AngularJS

Ember

Backbone(.stickit)

Bus Stop

Data

[
  {
  "Actual": true,
  "BlockNumber": 1122,
  "DepartureText": "3 Min",
  "DepartureTime": "/Date(1377800220000-0500)/",
  "Description": "Emerson/26Av-Broadway",
  "Gate": "",
  "Route": "5",
  "RouteDirection": "NORTHBOUND",
  "Terminal": "F",
  "VehicleHeading": 0,
  "VehicleLatitude": 44.9888311,
  "VehicleLongitude": -93.2898608
  },
  ...
]

Basic Template and Render

<h2>Bus Stop: {{stop}}</h2>
<ul>
  {{# buses:i}}
    <li>{{Route}}{{Terminal}} in {{DepartureText}}.</li>
  {{/ buses}}
</ul>

var $el = $('.container-output');
var template = $('#template-id');

var ractiveView = new Ractive({
  el: $el,
  template: template,
  data: {
    stop: busStop,
    buses: [ .. ]
  }
});

Styles, Mustache, and Polling

Mustache

<h2>Bus Stop: {{stop}}</h2>
<ul>
  {{# buses:i}}
    <li>{{Route}}{{Terminal}}
      {{# Actual}}
        {{ DepartureText.toLowerCase() === 'due' ? 'is Due' : 'arrives in ' + DepartureText }}
      {{/ Actual}}
      {{^ Actual}} arrives at {{DepartureText}}{{/ Actual}}.
    </li>
  {{/ buses}}
</ul>

Poll data

var ractiveView = new Ractive({
  el: $el,
  template: template,
  data: {
    stop: busStop,
    buses: []
  }
});

onBusUpdate(function(data) {
  ractiveView.set('buses', data);
});