Awesome

domjs-site-tree

Domjs based SiteTree

DomjsSiteTree allows configuration of SiteTree's with domjs style templates.

Basic example:

Let's say we have follwing domjs view files:

base.js

exports.title = "SitTree test page";

exports.head = function () {
  link({ rel: 'icon', href: '/favicon.png' });
  link({ rel: 'stylesheet', href: '/style.css' });
}

exports.body = function () {
  header(nav(ul(
    li(a({ href: '/' }, "Main page"))
  )));
  main();
  footer(p('© footer example'));
}

homepage.js

exports._parent = require('./base');
exports.main = function () {
  h1("Homepage of SiteTree demo");
  p("Homepage content ...");
}

subpage.js

exports._parent = require('./base');
exports.main = function () {
  h1("Subpage of SiteTree demo");
  p("Subpage content ...");
}

SiteTree configuration may look as:

var DomjsSiteTree = require('domjs-site-tree');
var Domjs = require('domjs');
var domjs = new Domjs(document);

// Initialize SiteTree instance:
var siteTree = new DomjsSiteTree(domjs);

// Retrieve view nodes:
var homepageView = require('./homepage');
var subpageView = require('./subpage');


// Switch between views in document:
// Present homepage
siteTree.load(homepageView);

// Switch to subpage
siteTree.load(subpageView);

// Switch back to homepage
siteTree.load(homepageView)

Installation

$ npm install domjs-site-tree

API

new DomjsSiteTree(domjs)

var DomjsSiteTree = require('domjs-site-tree');
var Domjs = require('domjs');

var domjs = new Domjs(document);

var siteTree = new DomjsSiteTree(domjs);

On initialization Domjs instance needs to be provided.

Templates format

DomjsSiteTree templates can be provided in a form of:

• functions, where content should be built using domjs element constructors (DocumentFragment will automatically be resolved via domjs)
• strings, which will be treated as plain text (not HTML) content for addressed elements.

For detailed documentation of configuration of SiteTree, please refer to SiteTree documentation

Tests

$ npm test