Rich-Harris

Since Ractive is solely concerned with rendering UI (like React), it doesn't have any opinions about where its data comes from and goes to. In theory this makes it ultra-flexible (want to use WebSockets? Fine. Want to use the Backbone adaptor? Also fine) but in practice we could probably do a much better job of coming up with some decent patterns and creating tutorials out of them, since this is a question that comes up often.

It's totally possible to just use jQuery (or AJAX lib of your choice), and do this sort of thing:

var updating;

getJSON(endpoint + '/' + id + '.json').then(function (data) {
  if (updating) return; // prevent infinite loops!
  

Rich-Harris

<div class='info'>
  {{#selectedFilm}}

    <!-- roll over the actor/director name to reveal credits -->
    <div class='credits'>
      {{#actor}}
        <div class='actor' on-hover='highlight:{{this}}'>
          <span>{{name}}</span>

          {{#highlighted}}

Rich-Harris

import { format, isNumber, sign } from 'number';
import { isString } from 'string';

/**
 * @constructor Range
 * Create a range. A range has a start, step, and end, and contains functions
 * to iterate over the range.
 *
 * A range can be constructed as:
 *     var range = new Range(start, end);

Rich-Harris

function get ( url ) {
	return new Promise( function ( fulfil, reject ) {
		var xhr = new XMLHttpRequest();

		xhr.open( 'GET', 'my-data.json' );

		xhr.onload = function () {
			fulfil( xhr.responseText );
		};

Rich-Harris

<h1>hello {{name}}!</h1>

<style>
	h1 { color: red }
</style>

Rich-Harris

<h1>hello {{name}}!</h1>

<style>
	h1 { color: red; }
</style>

<script>
	component.exports = {
		oninit: function () {
			get( 'data.json' )

Rich-Harris

{
	"rules": {
		"indent": [ 2, "tab", { "SwitchCase": 1 }],
		"quotes": [ 2, "single" ],
		"linebreak-style": [ 2, "unix" ],
		"semi": [ 2, "always" ],
		"no-mixed-spaces-and-tabs": [ 2, "smart-tabs" ],
		"object-shorthand":  [2, "always" ],
		"no-const-assign": 2,
		"no-class-assign": 2,

Rich-Harris

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define([], factory);
	else if(typeof exports === 'object')
		exports["Redux"] = factory();
	else
		root["Redux"] = factory();
})(this, function() {

Rich-Harris

var babelHelpers = {};

babelHelpers._extends = Object.assign || function (target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];

    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }

Rich-Harris

(function ( global ) {
  
	'use strict';

	var addCommaSeparators = function ( num, precision ) {
		var integer, decimal, remaining, result, lastThree;

		integer = Math.floor( num );
		decimal = num - integer;