Webpop template engine
JavaScript CoffeeScript CSS
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
coffeescripts
docs
javascripts
README.md
specRunner.html

README.md

PopTags Template Engine

PopTags is a declarative template engine written in CoffeeScript and used for rendering Webpop sites.

PopTags keeps code and templates strictly separated, while giving plenty of declarative power to templates.

Usage

var template = new PopTags.Template({template: "<pop:title wrap='h1'/>"})
var html = template.render({title: "Hello, World!"}); // -> <h1>Hello, World!</h1>

Reading Includes and Layouts

The read function are used for looking up templates when using <pop:include> or <pop:layout>:

var templates = {
  main: "<pop:include template='partial'/>",
  partial: "<pop:title wrap='h1'/>"
};

var read = function(name) {
  return templates[name];
};

var template = new PopTags.Template({read: read, name: "main"});
var html = template.render({title: "Hello, World!"}); // -> <h1>Hello, World!</h1>

Adding Filters

PopTags allow you to define filters that can be applied via attributes.

var filters = {
  format: function(value, options) {
    switch(options.format) {
      case "upcase":
        return value.toUpperCase();
      case "downcase":
        return value.toLowerCase();
    }
    return value;
  }
};

var template = new PopTags.Template({template: "<pop:title format='upcase' wrap='h1' />", filters: filters});
var html = template.render({title: "Hello, World!"}); // -> <h1>HELLO, WORLD!</h1>

Pulling in CommonJS modules

The require function are used for dynamically pulling in CommonJS and use their exported methods as tags:

var modules = {
  hello: {
    world: function(options, enclosed, tags) { return "Hello, World!"; }
  }
};

var require = function(name) {
  return modules[name];
};

var template = new PopTags.Template({template: "<pop:hello:world wrap='h1'/>", require: require});
var html = template.render(); // -> <h1>Hello, World!</h1>