Use

Stache templates are a mustache and handlebars compatible syntax. Stache templates are used to:

• Convert data into HTML.
• Update the HTML when observable data changes.
• Enable custom elements and bindings.

The following creates a stache template, renders it with data, and inserts the result into the page:

var stache = require("can-stache");
// renderer is a "renderer function"
var renderer = stache("<h1>Hello {{subject}}</h1>");

// "renderer functions" render a template and return a
// document fragment.
var fragment = renderer({subject: "World"})

// A document fragment is a collection of elements that can be
// used with jQuery or with normal DOM methods.
fragment //-> <h1>Hello World</h1>
document.body.appendChild(fragment)

Render a template with observable data like DefineMaps or DefineLists and the resulting HTML will update when the observable data changes.

var DefineMap = require("can-define/map/map");


var renderer = stache("<h1>Hello {{subject}}</h1>");
var map = new DefineMap({subject: "World"});
var fragment = renderer(map)
document.body.appendChild(fragment)

map.subject = "Earth";

document.body.innerHTML //-> <h1>Hello Earth</h1>

There’s a whole lot of behavior that stache provides. The following walks through the most important stuff:

• Magic Tag Types - The different tag types like {{key}} and {{#key}}...{{/key}}
• Scope and Context - How key values are looked up.
• Expressions - Supported expression types like {{helper arg}} and {{method(arg)}}
• Template Acquisition - How to load templates into your application.
• Helpers - The built in helpers and how to create your own.
• Live Binding - How live binding works.

See also

can-view-scope is used by stache internally to hold and lookup values. This is similar to how JavaScript’s closures hold variables, except you can use it programmatically.

can-component and can-view-callbacks.tag allow you to define custom elements for use within a stache template. can-view-callbacks.attr allow you to define custom attributes.

can-stache-bindings sets up element and bindings between a stache template’s can-view-scope, component viewModels, or an element’s attributes.