Skip to content

Expressions

Jump to bottom
rohenaz edited this page Jan 7, 2019 · 11 revisions

Expressions are data-* attributes known to Silica. The value of the attribute is a semi-evald value. Values can be chained and can consist of functions and regular properties. A function will halt the execution of a chain.

Example:

Here we have a div that will be visible if is_editable evaluates to true. is_editable can be a function or just a property set to true or false.

<div data-show="category.is_editable">Change</div>

Similar to the previous, notice the ! which acts as expected. The . (dot) operator takes precedence over the !.

<div data-show="!category.has_children">I am empty</div>

Actionable

These are expressions which bind to a user's actions. Actionable expressions will call the value specified which must be a function, always passing the element as the first argument to the function. If a model is specified it will be passed as the second argument.

  • data-blur
  • data-click
  • data-clickoutside
  • data-dblclick
  • data-load - for <img> tag onload callback
  • data-mousedown
  • data-mouseenter - doesn't bubble
  • data-mouseleave - doesn't bubble
  • data-mousemove
  • data-mouseout - bubbles
  • data-mouseover - bubbles
  • data-mouseup
  • data-mousewheel
  • data-submit
  • data-touchcancel
  • data-touchend
  • data-touchmove
  • data-touchstart

Output

These are your binding expressions that output a value. The properties specified can be functions, primitives, or objects. DO NOT include parenthesis of a function. Function properties are called with out any arguments and should be viewed as computable properties. A function will get called with its this context set to the object.

  • data-class - Set a css class to the returned value
  • data-disabled - Sets the enabled property for form elements
  • data-show - Toggles the css class hidden based on truthiness
  • data-if - Removes the element from the DOM based on truthiness, data-show is preferable
  • data-style - Sets the css style attribute to the returned value
  • data-repeat - Iterate through an array with its first child element as the template
  • data-include - Replace any children with the html specified by URL. The value specified will be evald, so if it is a string, surround it in '' (single quotes). The compiler will NOT eval, but expects the same syntax.
  • data-model - Bind the innerHTML, value, checked attributes to the value specified. If the element is editable, these are 2-way bindings
  • data-filter - Used in conjunction with data-model only; allows a filter to be applied to the value returned by model before outputing the value.
  • data-silica="attribute=value"- Bind the value to the specified attribute
  • data-silica='["attribute1=value1","attribute2=value2"]' - Bind multiple values to multiple attributes

This will pipe the value of category.amount through the currency filter before setting the span.innerHTML

<span data-model="category.amount" data-filter="currency"></span>

The data-model and data-filter expressions are so common that there is a shortcut; specified using mustache style with optional pipes.

Same as above

{{category.amount|currency}}

No filter:

{{category.name}}

Filters defined by mustache expression can also provide additional arguments to the filter function:

{{category.amount|currency:usd}}

Clone this wiki locally