See use.no.de/spectrum.
Introduction
Spectrum.js is a JavaScript template language targetted at both the server (e.g. node.js) and the client-side. It has a lightweight syntax, using embedded JavaScript for logic rather than inventing yet another language to learn. This "logic-ful" template approach ensures that all of you view logic can live within your views, in contrast to the some recent "logic-less" template" systems. It also borrows heavilly from Mason to achieve high levels of reuse within your templates.
Usage
Installation
NPM is recommended for development, although for production you might want to find/build a package for your operating system:
npm install spectrum
Loading
To load Spectrum.js:
var spectrum = require('spectrum');
Rendering a Template
Create a new template renderer:
var view = new spectrum.Renderer('/path/to/template/root');
Use this to render a template within the template root:
view.render('/index.spv', { "view" : "data" }).then(function (output) {
// rendered content is available in the output variable
});
This page is my initial brain dump on template syntax and interface. This is all subject to change.
Template Syntax
Code Lines
Lines of javascript can be mixed with the output by prefixing each line with a ':', e.g.
: if (validation_error) {
<p class="error">An error has occurred.</p>
: }
Multiple lines run together, i.e. this works:
: if (validation_error)
: {
<p class="error">An error has occurred</p>
: }
Expression Tags
An expression tag inserts the result of a javascript expression into the output, e.g.
Hello <%= user.name %>.
Code Tags
Code tags allow you to insert larger chunks of javascript code.
<%
var pi = 3.14159;
%>
Suppressed Line Breaks
To suppress a line-break, insert a backslash at the end of a line (or before trailing whitespace on the end of a line), e.g.
Hello \
<%= user.name %>
(results in 'Hello Tom' without a line-break).
This is more useful in plain text formats (e.g. plain text email) than html generation.
Method Definitions
Method definitions are the primary unit of reuse. See below for how they are called.
<~method name(parameter, list)>
I am the output of the method_name method.
</~method>
Method Calls
Method calls are ordinary javascript method calls:
The output is <[ this.method_name('blah', 'blah') ]>.
Inheritance
By default, each template inherits from another template called base.spv in the template root. Rendering starts in the root of this template, with the content from the main template starting where the base template calls next(this).
/base.spv
<h1><% this.title() %></h1>
<div class="content">
<% next(this) %>
</div>
/called/template.spv
<~method title>My Template</~method>
This appears within the content div.
Copyright
Copyright 2010 British Broadcasting Corporation
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.