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);
});
          

Data Updates

var buses = { a: 1, b: 2 };
var ractiveView = new Ractive({
  el: $el,
  template: template,
  data: {
    stop: busStop,
    buses: buses
  }
});
buses.c = 4;
ractiveView.update('buses');
          

Array modifications

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

onBusUpdate(function(data) {
  buses.push(data[count++]);
});
          

Observe

ractiveView.observe('stop', function(e) {
  busStop = this.get('stop');
  poller.update();
});

ractiveView.set('stop', '17982');
          

Events

Highlighting with Hover

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

ractiveView.on('highlight', function(e) {
  $(e.original.target).toggleClass('highlight');
});
          

Geolocate with Tap

<a href="#" on-tap="closest" class="geolocate-stop" title="Find closest stop"></a>
<h2>Bus Stop: {{stop}}</h2>
<ul>
  {{# buses:i}}
    <li on-hover="highlight">{{Route}}{{Terminal}}
      {{# Actual}}
        {{ DepartureText.toLowerCase() === 'due' ? 'is Due' : 'arrives in ' + DepartureText }}
      {{/ Actual}}
      {{^ Actual}} arrives at {{DepartureText}}{{/ Actual}}
    </li>
  {{/ buses}}
</ul>
          

ractiveView.on('closest', function(e) {
  e.original.preventDefault();
  getClosestStop(function(stop) {
     ractiveView.set('stop', stop);
  });
});
          

Input

<a href="#" on-tap="closest" class="geolocate-stop" title="Find closest stop"></a>
<h2>Bus Stop: {{stop}}</h2>
<div class="actions">
  <label>Update stop:</label> <input type="text" value="{{stop}}" />
</div>
          

Formatters

var ractiveView = new Ractive({
  el: $el,
  template: template,
  data: {
    stop: busStop,
    buses: [],
    formatTime: function(moment, format) {
      format = format || 'h:mm A';
      return moment.format(format);
    }
  }
});
          

<ul>
  {{# buses:i}}
    <li on-hover="highlight">{{Route}}{{Terminal}}
      {{# Actual}}
        {{ DepartureText.toLowerCase() === 'due' ? 'is Due' : 'arrives in ' + DepartureText }}
      {{/ Actual}}
      {{^ Actual}} arrives at {{formatTime(time)}}{{/ Actual}}
    </li>
  {{/ buses}}
</ul>
          

Transitions

<ul>
  {{# buses:i}}
    <li on-hover="highlight" intro="slide">{{Route}}{{Terminal}}
      {{# Actual}}
        {{ DepartureText.toLowerCase() === 'due' ? 'is Due' : 'arrives in ' + DepartureText }}
      {{/ Actual}}
      {{^ Actual}} arrives at {{formatTime(time)}}{{/ Actual}}
    </li>
  {{/ buses}}
</ul>
          

Animations

ractiveView.observe('buses', function(oldV, newV) {
  _.each(newV, function(b, i) {
    var path = 'buses.' + i + '.minutes';

    ractiveView.animate(path, b.minutes, {
      duration: 1000,
      step: function(t, value) {
        ractiveView.set(path, poller.colorScale(value).hex());
        return value;
      },
    });
  });
});
          

console.log('FAIL');