wearhere/HelloWorld.ract

## gulpfile.js
const ractive = require('rollup-plugin-ractive');

// Rollup plugins
let plugins = [
  // Note that we could keep Handlebars in for views where we didn't want to (yet) use Ractive.
  // That's why the file extension isn't HTML.
  ractive({
    extensions: ['.ract']
  })
];

## HelloWorld.ract
<h1>Hello, {{ titlecase(name) }}</h1>

## HelloWorldModel.js
const HelloWorldModel = Backbone.Model.extend({
  defaults: {
    name: null
  }
});

## HelloWorldView.js
import Template from './HelloWorld.ract';

const HelloWorldView = Backbone.View.extend({
  render() {
    this.ractive = new Ractive({
      el: this.el,
      template: Template,
      data: this.model,
      adapt: [ 'Backbone' ]
    });
    return this;
  }
});

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="//cdn.jsdelivr.net/g/ractive@0.8.10(ractive.runtime.min.js),ractive.adaptors-backbone@0.3.0,backbonejs@1.3.3,underscorejs@1.8.3,jquery@3.1.1"></script>
  </head>
  <body>
    <div id="main"></div>
  </body>
</html>

## index.js
import HelloWorldModel from './HelloWorldModel.js';
import HelloWorldView from './HelloWorldView.js';

let model = new HelloWorldModel({ name: 'jeff' });

new HelloWorldView({
  el: $('#main'),
  model
}).render();

setTimeout(() => {
  model.set('name', 'brad');
}, 2000);

## RactiveHelpers.js
_.extend(Ractive.defaults.data, {
  titlecase(string) {
    if (!string) return string;

    return string[0].toUpperCase() + string.slice(1);
  }
});
	const ractive = require('rollup-plugin-ractive');

	// Rollup plugins
	let plugins = [
	// Note that we could keep Handlebars in for views where we didn't want to (yet) use Ractive.
	// That's why the file extension isn't HTML.
	ractive({
	extensions: ['.ract']
	})
	];
	const HelloWorldModel = Backbone.Model.extend({
	defaults: {
	name: null
	}
	});
	import Template from './HelloWorld.ract';

	const HelloWorldView = Backbone.View.extend({
	render() {
	this.ractive = new Ractive({
	el: this.el,
	template: Template,
	data: this.model,
	adapt: [ 'Backbone' ]
	});
	return this;
	}
	});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//cdn.jsdelivr.net/g/ractive@0.8.10(ractive.runtime.min.js),ractive.adaptors-backbone@0.3.0,backbonejs@1.3.3,underscorejs@1.8.3,jquery@3.1.1"></script>
	</head>
	<body>
	<div id="main"></div>
	</body>
	</html>
	import HelloWorldModel from './HelloWorldModel.js';
	import HelloWorldView from './HelloWorldView.js';

	let model = new HelloWorldModel({ name: 'jeff' });

	new HelloWorldView({
	el: $('#main'),
	model
	}).render();

	setTimeout(() => {
	model.set('name', 'brad');
	}, 2000);
	_.extend(Ractive.defaults.data, {
	titlecase(string) {
	if (!string) return string;

	return string[0].toUpperCase() + string.slice(1);
	}
	});