placeholders

Placeholders

Vomit uses JavaScript Template Literals to create multiline templates and address all concerns in the same language : JavaScript.

Template Literals

ES6 Template Literals use back-ticks rather than the single or double quotes we’re used to with regular strings. A template string could thus be written as follows:

var greeting = `Hello World!`

Creating a DOM element with Vomit is then as simple as

var greeting = vomit`<h1>Hello World!</h1>`

String substitution

Template literals allows to substitute placeholders (using the ${}) with any valid JavaScript expression and coerce the result into a String.

var name = 'Bob'
var greeting = `Hello ${name}!`

Get literal with ES6 Template Strings for more information

Vomit uses Template Literals to create DOM elements and allows you to substitute a lot more than strings. With vomit you can use:

• Primitives
• Arrays
• Functions
• DOM elements
• Objects
• Promises
• Streams

as placeholders.

Example

Here's a simple example using vomit placeholders:

var name = 'Bob'
var user = vomit`<span>${name}</span>`
var greeting = vomit`<h1 onclick="${show}">Hello ${user}!</h1>`

function show() {
  // show user details
}

Practice makes perfect and you will find examples of placeholders in our dedicated section.