Ractive.js template engine wrapper providing server-side compiled templates for SocketStream apps
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.jshintrc
HISTORY.md
README.md
engine.js
package.json

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