templates


See Also bindable.Object, views.Base

Templates Provide the view in MVC - they're simply used to display information to the user, and relay user-interactions back to the view controller.

Paperclip takes on a mustache / handlebars approach with variables, blocks, and pollyfills. Paperclip also allows basic inline javascript, similar to angular.js.

Installation

npm install mojo-paperclip --save-exact

Template Syntax

{{ blocks }}

Variable blocks as placeholders for information that might change. For example:

You can also specify blocks within attributes.

Paperclip also supports inline javascript. For example:

Modifiers

Modifiers format data in a variable block. A good example of this might be presenting data to the user depending on their locale, or parsing data into markdown. Here are a few examples of how you can use modifiers:

Binding Operators

Paperclip comes with various binding operators that give you full control over how references are handled. You can easily specify whether to bind one way, two ways, or not at all. Here's the basic syntax:

Built-in components

{{ html: content }}

Similar to escaping content in mustache ({{{content}}}). Good for security.

{{ #if: condition }}

Conditional block helper

data-bind attributes

data-bind attributes are inspired by knockout.js. This is useful if you want to attach behavior to any DOM element.

{{ model: context }}

Input data-binding

Notice the <~> operator. This tells paperclip to bind both ways. See binding operators for more info.

{{ event: expression }}

Executed when an event is fired on the DOM element. Here are all the available events:

  • onChange - called when an element changes
  • onClick - called when an element is clicked
  • onLoad - called when an element loads - useful for <img />
  • onSubmit - called on submit - useful for <form />
  • onMouseDown - called on mouse down
  • onMouseUp - called on mouse up
  • onMouseOver - called on mouse over
  • onMouseOut - called on mouse out
  • onKeyDown - called on key down
  • onKeyUp - called on key up
  • onEnter - called on enter key up
  • onDelete - called on delete key up

{{ show: bool }}

Toggles the display mode of a given element. This is similar to the {{#if: expression }} conditional helper.

{{ css: styles }}

Sets the css of a given element. For example:

{{ style: styles }}

Sets the style of a given element.

{{ disable: bool }}

Toggles the enabled state of an element.

<button data-bind={{ disable: !formIsValid }}>Sign Up</button>

{{ focus: bool }}

Focuses cursor on an element.

<input data-bind={{ focus: true }}></input>

Basic API

paperclip([application])

initializes paperclip with the given application. Application.main will be used if this is omitted.

paperclip.modifier(modifierName, modifier)

registers a new paperclip modifier within the context of the application. See example above.

template paperclip.template(source)

Parses a template.

template.bind(context).render()

Binds a template, and returns a document fragment.

For core paperclip documentation, see Core API