Batman.js is no longer in production at Shopify and is not actively maintained.

This website is left for reference (and for old times' sake).


View filters modify keypath values in view bindings. Batman.js's view filters are inspired by Liquid filters.

Filters may be used to:

  • modify values for presentation (eg, truncate, downcase)
  • mix keypath values and literals (eg, append, pluralize)
  • modify event handlers (eg, withArguments, toggle)

See the Batman.View Filters documentation for a full list of available view filters.

Using Filters

You can apply filters to bindings by joining them with " | ". For example, to apply the truncate filter with argument 100:

<p data-bind="post.body | truncate 100"></p>

The above <p> will have the first 100 characters of the post's body. Whenever the post.body changes, it will be retruncated and the <p>'s innerHTML will be updated.

Filter chains can be arbitrarily long:

<span data-bind=" | prepend 'Sir ' | append ', the honourable'"></span>

and filter chains can use other keypaths as arguments to the filters:

<span data-bind=" | prepend ' ' | prepend person.title"></span>

The above <span>'s innerHTML will be updated whenever the person's name or title changes. Both keypaths are tracked by the binding.

Note that filtered keypaths cannot propagate DOM changes to JavaScript because values can't always be "unfiltered". Filters only affect Javascript-to-DOM bindings, not DOM-to-Javascript!

Help us improve our documentation!

Contributions to this page are welcome on Github. If you find a problem but you cannot fix it, please open an issue.

Discussion regarding batman.js documentation is also welcome on our mailing list.