https://github.com/socketstream/ss-ractive
Ractive.js template engine wrapper providing server-side compiled templates for SocketStream apps
https://github.com/socketstream/ss-ractive
Last synced: 4 months ago
JSON representation
Ractive.js template engine wrapper providing server-side compiled templates for SocketStream apps
- Host: GitHub
- URL: https://github.com/socketstream/ss-ractive
- Owner: socketstream
- Created: 2014-11-17T00:10:10.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-09-13T03:26:47.000Z (over 10 years ago)
- Last Synced: 2025-11-27T10:45:52.650Z (6 months ago)
- Language: JavaScript
- Size: 180 KB
- Stars: 7
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
Awesome Lists containing this project
README
# 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:
```javascript
ss.client.templateEngine.use(require('ss-ractive'));
```
### Usage
ss-ractive wraps Ractive script tags (`...`) around SocketStream templates. For example, a jade template file (compiled with `ss-jade`) located at `/client/templates/test/component.jade` with the following content:
```jade
h1 {{title}}
| {{{content}}}
```
Will compile to HTML script tags:
```html
<h1>{{title}}</h1>{{{content}}}
```
And can be registered on the client as a component with Ractive.js as follows:
```javascript
Ractive.components.TestComponent = Ractive.extend({
template: '#test-component',
data: {
title: 'This Is The Title',
content: '
Sample content here.
'
},
// 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](http://docs.ractivejs.org/latest/get-started).
The above example shows templates first compiled with Jade ([ss-jade](https://github.com/socketstream/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:
```javascript
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'
});
```