node package manager

Introducing npm Enterprise add-ons. Integrate third-party dev tools into npm…

spectrum

JavaScript Template Library

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

NPM is recommended for development, although for production you might want to find/build a package for your operating system:

npm install spectrum

To load Spectrum.js:

var spectrum = require('spectrum');

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.

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>
: }

An expression tag inserts the result of a javascript expression into the output, e.g.

Hello <%= user.name %>.

Code tags allow you to insert larger chunks of javascript code.

<%
    var pi = 3.14159;
%>

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 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 are ordinary javascript method calls:

The output is <[ this.method_name('blah', 'blah') ]>.

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).

<h1><% this.title() %></h1>

<div class="content">
    <% next(this) %>
</div>
<~method title>My Template</~method>

This appears within the content div.

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.