No results found

Extending Markup.js with custom pipes

App Cloud ships with Markup.js, a handy-dandy JavaScript templating system that helps you separate presentation logic from business logic. Markup.js has a unique way to "pipe" variables through functions. For example, here's how to convert a string to upper case:

<p>Welcome, {{name.first|upcase}}!</p>

The above template would print <p>Welcome, ADAM!</p> when injected with some context data.

It's easy to write your own custom pipes. Here's a custom pipe that takes a string value and reverses it:

Mark.pipes.twist = function (str) {
    return str.split("").reverse().join("");

And here's a pipe that appends a specific number of exclamation points to a string:

Mark.pipes.shout = function (str, n) {
    return str + new Array((parseInt(n) || 1) + 1).join("!");

A template using the above pipe might look like this:

<p>Welcome, {{name.first|shout>5}}</p>

The above template would print <p>Welcome, Adam!!!!!</p>. Note the value of n gracefully defaults to 1 if it's not provided. Also note that n is converted to an integer since all arguments after the first one are interpreted as strings.

Check out the extras directory in the Markup.js repository for more examples!

p.s. Get more tips and tricks (and share your own) by joining the Brightcove App Cloud discussion group on Google.