XalokNext Documentation

Appearance

View Binding Filters ​

Wf filters ​

absoluteUrl [read-only] ​

html
    wf-bind="href:absoluteUrl(page_slug)"

Prepends the wf_cms.admin.publicUrl parameter in front of the URL.

arrayNotEmpty [read-only] ​

Returns true if the value is an array that is not empty. Useful in conjuction with wfToggle and moduleRepeat.

authorProperty [read-only] ​

DEPRECATED This works only on the first element of the authors array. Use moduleRepeat - it works for cases when there are multiple authors.

Gets the first module in the array and extracts the given property (3rd argument, name in the example below)

html
    data-bind="{attr:{href:authorProperty(page_authors, '/author/__slug__', 'name', 'target="_blank"')}}

authorsModuleRepeat [read-only] ​

Goes through all the authors and adds a name property to them that is either the author's signature (if set and not empty) or, by default, concatenates the firstName and lastName properties Check moduleRepeat binding expander for an example

avatar [read-only] ​

  data-bind="avatar:avatar(filter, avatar)"

Returns an object with two properties:

  • src the relative url with the specified image filter;
  • title the title of the image;

cmText [read-only] ​

  data-bind="cmText:cmText(id, text)"

Returns an object with two properties:

  • id the id of the module
  • text the text value the module will contain

currentUriClass [read-only] ​

Used internally by the currentUriClass binding expander.

date [read-only] ​

  data-bind="date:date(format, date)"

Returns a formatted date string.

href [read-only] ​

Used internally by the href binding expander.

hrefCategory [read-only] ​

Returns the URL of a category Most likely to be used inside a moduleRepeat binding expander, it gives access to the $item model corresponding to a category.

html
<a data-bind="href:hrefCategory($categoryModel),text:categoryModel_title"></a>

hrefTag [read-only] ​

Returns the URL of a tag. Most likely to be used inside a moduleRepeat binding expander, it gives access to the $item model corresponding to a tag.

html
<a data-bind="href:hrefTag($tagModel),text:tagModel_title"></a>

imageFilter [read-only] ​

  data-bind="filter:imageFilter(filter, baseUrl)"

Returns:

  • a string that is the relative path to the file when a single filter is used;
  • an array of objects containing:
    • src relative path to file with filter;
    • width image width

Multiple filters can be linked like this image_100_100:100|image_200_200:200 where image_100_100 is the filter and :100 is the width. This is used for setting multiple image sizes with srcset attribute.

join [read-only] ​

  data-bind="text:join(arrayOfObjects, key, separator = ', ')"

For each item in arrayOfObjects it reads the key and concatenates all the values using separator

joinStrings [read-only] ​

  data-bind="text:joinStrings(string1, string2, string3, ...etc, separator)"

Joins the passed strings using separator

moduleRepeat ​

Used internally by the moduleRepeat binding expander.

moveElement ​

Used internally by the moveElement binding expander.

pollOptions ​

Used internally by the pollOptions binding expander.

shareUrl ​

Used internally by the shareUrl binding expander.

slug [read-only] ​

  data-bind="href:slug(slug)"

Returns a string with the relative url. It also checks if slug starts with / and if not it adds it.

strictEquals [read-only] ​

  data-bind="toggle:strictEquals(currentPage_staticSettings_showTitle, true)"

Returns true if the value passed as first argument equals strictly the second argument.

urlParams ​

Used internally by the urlParams binding expander.

video [read-only] ​

  data-bind="video:video(href, source = 'local')"

Returns an object with two properties:

  • href:
    • local file: return a relative path to the file
    • external resource: returns the media id
  • source: string describing the source of the video (youtube, ooyala)

Epoxy filters ​

Binding filters provide a layer of flexibility for formatting data attributes directly within a binding declaration; they may perform read-only formatting on multiple inputs, or perform read-write formatting on a single input. Filters are intended to format raw values for binding-specific purposes:

html
    <span data-bind="toggle:not(firstName)">Please enter a first name.</span>

Binding filters may be parameterized with any data attribute(s) available in the [binding context](file:///Users/razvan/htdocs/ascom/vendor/wfcms/cms-assets-bundle/Wf/Bundle/CmsBaseAssetsBundle/Resources/public/javascripts/lib/backbone.epoxy/www/documentation.html#view-binding-context), or with primitive values (String, Number, or Boolean). However, binding filters may NOT be nested within one another — this is very deliberate: application logic does not belong within binding declarations. If you need to perform multi-pass value formatting, that work should be done in a computed property, or else applied as a custom binding handler.

See view bindingFilters for process on defining your own custom filters.

all [read-only] ​

data-bind="toggle:all(dataAttribute,[...])"

Assesses one or more data attributes as true if all attributes are truthy.

any [read-only] ​

 data-bind="toggle:any(dataAttribute,[...])"

Assesses one or more data attributes as true if any of the attributes are truthy.

csv [read-write] ​

 data-bind="checked:csv(dataList)"

Exchanges comma-separated values data between models and bindings. A string is parsed into a comma-separated array when read through the csv filter, and then is formatted as a comma-separated string when written back through the filter. This is handy for storing a primitive list value within a model, while using it as an array in view bindings. Note that this is only a simple split/join implementation of comma-separated values, so advanced CSV formatting (string closures, etc) will not apply.

decimal [read-write] ​

 data-bind="checked:decimal(floatAttribute)"

Exchanges a floating-point decimal value between models and bindings. A string is parsed into a float when being read or written through the decimal filter. This is handy for preserving float data formatting when binding to input elements.

format [read-only] ​

 data-bind="text:format('$1 of $2',dataAttribute,dataAttribute)"

Formats a string with a series of data attribute replacements. Operates the same as string replacement for RegExp capture groups, where field insertions are denoted as "$1, $2, ... $n". Escape intentional "$n" patterns within the template string as "$n". Note that the first value insertion index is 1, not 0.

integer [read-write] ​

 data-bind="checked:integer(numberAttribute)"

Exchanges an integer value between models and bindings. A string is parsed into an integer when being read or written through the integer filter. This is handy for preserving numeric data formatting when binding to input elements.

length [read-only] ​

 data-bind="toggle:length(dataAttribute)"

Returns the length of an Array or Collection data attribute, or 0 by default. Useful for loosely-typed assessments of a collection's content status.

none [read-only] ​

 data-bind="toggle:none(dataAttribute,[...])"

Assesses one or more data attributes as true if none of the attributes are truthy.

not [read-only] ​

 data-bind="toggle:not(dataAttribute)"

Inverts the loosely-typed boolean value of a data attribute.

select [read-only] ​

 data-bind="text:select(conditionalValue,truthyValue,falseyValue)"

Performs a ternary operation using JavaScript's ?: operator. The select operation receives three arguments: the first argument is assessed as a loosely-typed conditional; if truthy, the second argument is returned; if falsey, the third argument is returned.