README.md

Ractive Template Engine wrapper for SocketStream

http://www.ractivejs.org/

Ractive client-side templates in your app.

Setup

Add ss-ractive to your application's package.json file:

npm install ss-ractive@latest --save

Then add this line to app.js:

ss.client.templateEngine.use(require('ss-ractive'));

Usage

ss-ractive wraps Ractive script tags (<script type="text/ractive">...</script>) around SocketStream templates. For example, a jade template file (compiled with ss-jade) located at /client/templates/test/component.jade with the following content:

h1 {{title}}
| {{{content}}}

Will compile to HTML script tags:

<script id="test-component" type="text/ractive"><h1>{{title}}</h1>{{{content}}}</script>

And can be registered on the client as a component with Ractive.js as follows:

Ractive.components.TestComponent = Ractive.extend({
	template: '#test-component',
	data: {
		title: 'This Is The Title',
		content: '<p>Sample content <em>here</em>.</p>'
	},
	// etc.
});

Notice the prefix ractive- to avoid namespace collision. Note also the preservation of handlebars syntax in the compiled templates, since Ractive.js relies heavily on Handlebars-like syntax see the Ractive.js documentation.

The above example shows templates first compiled with Jade (ss-jade), but in theory, any compiled templates will work with ss-ractive, as long as the definition (ss.client.templateEngine.use(require('ss-ractive'));) comes after other template engine definitions.

This wrapper also allows for pretty output for development, as well as loading a legacy ractive file:

ss.client.templateEngine.use(require('ss-ractive'), '/', {
	// pretty html
	pretty: true,
	// load a different ractive filename from the npm repo
	// (the path is resolved via require.resolve('ractive'))
	ractiveFilename: 'ractive-legacy.runtime.min.js'
});