Batman filters are evaluated from left to right, with the output of each filter being injected into the next. This allows you to form filter chains for display purposes. Accessor caching does not apply to filter chains. If any component of the chain changes, the entire chain will be recalculated for each binding in the template.

  • raw(value) : string

    The raw filter renders the unescaped value.

    <span data-bind="someHTMLyString | raw"></span>
  • get(value, key) : value

    Calls the get function on the input value with the specified key. Can be used with Batman.Accessible and Batman.TerminalAccessible:

    <span data-bind="accessibleFunction | get 'item'"></span>
  • value[key] : value

    Shorthand for the get filter.

  • equals(left, right) : boolean

    Checks if left content is equal to right content:

    <span data-showif="title | equals 'Batman Views'"></span>
  • not(value) : boolean

    Inverts the truthiness of the input value:

    <span data-hideif="title | equals 'Batman Views' | not | and action | equals 'show'"></span>
  • matches(value, string) : boolean

    Tests a string against the input value:

    <span data-showif="title | matches 'Bat'"></span>
  • truncate(value, length, end = '...') : string

    Limits the length of output to the specified length and appends the specified text if over the limit:

    <span data-bind="page.title | truncate 5, '…'"></span>

    Would result in:

    <span data-bind="page.title | truncate 5, '…'">About…</span>
  • default(value, defaultValue) : value

    Provides a default value if the keypath is falsy:

    <input type="text" data-bind="page.title | default 'About Us'"></input>
  • prepend(value, string) : string

    Prepends the string to the input value:

    <span data-bind-class="page.tag | prepend 'ico-'"></span>

    If page.tag is 'about' this would result in:

    <span data-bind-class="page.tag | prepend 'ico-'" class="ico-about"></span>
  • append(value, string) : string

    Appends the string to the input value:

    <span data-bind-class="page.tag | append '-ico'"></span>

    If page.tag is 'about' this would result in:

    <span data-bind-class="page.tag | append '-ico'" class="about-ico"></span>
  • replace(value, searchString, replaceString[, flags]) : string

    Replaces content in the input value matching the searchString with the replaceString value:

    <span data-bind="page.title | replace 'html', 'HTML'"></span>
  • downcase(value) : string

    Downcases the input value:

    <span data-bind="page.title | downcase"></span>
  • upcase(value) : string

    Upcases the input value:

    <span data-bind="page.title | upcase"></span>
  • pluralize(value, count) : string

    Pluralizes the input value based on the patterns specified in Batman.helpers.inflector and the count provided:

    ( ->
      @singular /(analysis)$/i, '$1'
      @singular /(analy)ses$/i, '$1sis'
    <span data-bind="'analysis' | pluralize page.comments.count"></span>
  • humanize(string) : string

    Takes a string and makes it human readable, for example 'an_underscored_string' would become 'An underscored string'.

    <span data-bind="'about_us_page' | humanize"></span>

    Would result in:

    <span data-bind="'about_us_page' | humanize">About us page</span>
  • join(value, separator = '') : string

    Joins an array of values into a single string:

    <span data-bind="page.comments | map 'title' | join ', '"></span>
  • sort(value) : value

    Sorts an array using the default comparison:

    <span data-foreach-comment="page.comments | sort" data-bind="comment.title"><span>
  • map(iterable) : value

    Maps the specified keypath from an array of objects:

    <span data-foreach-author="page.comments | map 'author'" data-bind="author"><span>
  • has(iterable, item) : boolean

    Calls the iterable's has function to check for the existence of the specified item.

    class Sample.FirstController extends Batman.Controller
      index: ->
        @set('things', new Batman.Set('thing1', 'thing2'))
    <input type="checkbox" data-bind-checked="things | has 'thing1'"></input>

    If you were to dispatch first#index:

    <input type="checkbox" data-bind-checked="things | has 'thing1'" checked="true"></input>
  • first(iterable) : value

    Returns the first value from an array:

    <span data-context-firstComment="page.comments | first"></span>
  • meta(value, keypath) : value

  • interpolate(string, valuesObject) : string

    Allows you to use string interpolation:

    <span data-bind="'The page title is %{title}%' | interpolate {'title': 'page.title'}"></span>
  • withArguments(function, curriedArguments...) : function

    Ensures that the function is called with the supplied arguments in addition to the arguments it would normally be called with. This is a form of currying. The argument order will be the curried arguments (those passed to withArguments) first, then the regular arguments. In the case of a click event, the regular arguments are node, event, view.

    class Sample.CloseWindowView extends Batman.View
      html: '<span data-event-click="closeWindow | withArguments true"></span>'
      closeWindow: (actuallyClose) ->
        window.close() if actuallyClose
    <div data-view="CloseWindowView"></div>
  • escape(value) : string

    Escapes HTML in the input value:

    <textarea data-bind="page.body_html | escape"></textarea>