Need private packages and team management tools?Check out npm Teams »

templejs

0.5.12 • Public • Published

Temple

A JavaScript view framework.

  • Reactive - Powered by Trackr, Temple automatically updates the DOM as data changes.
  • Template Driven - Use a Mustache-HTML hybrid syntax to quickly generate UI scaffolding.
  • Modular & Extensible - All views are encapsulated, reusable components.
  • Data Neutral - Temple can be easily integrated with existing frameworks and platforms.

Example

Here is a basic example of using Temple. This just uses a simple variable, but Temple has support for most of the major Mustache features.

// create a view instance from a template and data
var tpl = Temple.render("<h1>Hello {{ name }}</h1>", { name: "World" });
 
// render and append to the document body
tpl.paint("body");
 
// later, change the value and watch it auto-update the DOM
tpl.data.name = "John";

Listening for DOM events is really easy in Temple. Enable the plugin and then add an on-<event> attribute to any element.

// create a view instance from just a template
var tpl = Temple.render("<a href='#' on-click='alert'>Click Me</a>")
 
// enable the DOM events plugin
.use("actions")
 
// add the special alert action
.addAction("alert", function(e) {
    e.original.preventDefault();
    alert("You clicked me!");
})
 
// render and append to the document body
.paint("body");

Temple even lets you turn your views into reusable components.

// a reusable View class
var Hello = Temple.extend({
    template: "Hello {{ name }}"
});
 
// render a new template that uses the view as a partial
var tpl = Temple.render("<h1>{{> hello }}</h1>", { name: "John" })
.setPartial("hello", Hello)
.paint("body");
 
// views can also be rendered directly
var tpl2 = new Hello({ name: "World" }).paint("body");

Install

npm i [email protected]

Version

0.5.12

License

MIT

Last publish

Collaborators

  • avatar
  • avatar