node package manager

can-stache-converters

can-stache-converters

Build Status

A set of common stache converters to use with forms in your application.

API

boolean-to-inList(item, list)

When the getter is called, returns true if item is within the list, determined using .indexOf.

When the setter is called, if the new value is truthy then the item will be added to the list using .push; if it is falsey the item will removed from the list using .splice.

<input type="checkbox" {($value)}="boolean-to-inList(item, list)" />
  1. item {*}: The item to which to check
  2. list {can-define/list/list|can-list|Array}: The list
  • returns {can-compute}: A compute that will be used by [can-stache-bindings] as a getter/setter when the element's value changes.

string-to-any(~item)

When the getter is called, gets the value of the compute and calls .toString() on that value.

When the setter is called, takes the new value and converts it to the primitive value using [can-util/js/string-to-any/string-to-any] and sets the compute using that converted value.

<select {($value)}="string-to-any(~favePlayer)">
  <option value="23">Michael Jordan</option>
    <option value="32">Magic Johnson</option>
</select>
  1. item {can-compute}: A compute holding a primitive value.
  • returns {can-compute}: A compute that will be used by [can-stache-bindings] as a getter/setter when the element's value changes.

not(~value)

When the getter is called, gets the value of the compute and returns the negation.

When the setter is called, sets the compute's value to the negation of the new value derived from the element.

Note that not needs a compute so that it can update the scope's value when the setter is called.

<input type="checkbox" {($checked)}="not(~val)" />
  1. value {can-compute}: A value stored in a [can-compute].
  • returns {can-compute}: A compute that will be two-way bound by [can-stache-bindings] as a getter/setter on the element.

index-to-selected(~item, list)

When the getter is called, returns the index of the passed in item (which should be a [can-compute] from the provided list.

When the setter is called, takes the selected index value and finds the item from the list with that index and passes that to set the compute's value.

<select {($value)}="index-to-selected(~person, people)">
 
    {{#each people}}
 
        <option value="{{%index}}">{{name}}</option>
 
    {{/each}}
 
</select>
  1. item {can-compute}: A compute whose item is in the list.
  2. list {can-define/list/list|can-list|Array}: A list used to find the item.
  • returns {can-compute}: A compute that will be two-way bound to the select's value.

either-or(~chosen, a, b)

When the getter is called, gets the value of the chosen compute and if it is equal to a returns true, otherwise it returns false.

When the setter is called, if the new value is truthy, sets the chosen [can-compute] to a's value, otherwise sets it to b's value.

<span>Favorite superhero:</span>
<input type="checkbox" {($checked)}="either-or(~chosen, 'Batman', 'Superman')"> Batman?
  1. chosen {can-compute}: A compute where the chosen value (between a and b is stored). When the setter is called, this compute's value will be updated.

  2. a {*}: The true value. If the checkbox is checked, then a's value will be stored in the chosen compute.

  3. b {*}: The false value. If the checkbox is unchecked, then b's value will be stored in the chosen compute.

  • returns {can-compute}: A compute that will be used by [can-stache-bindings] as a getter/setter bound to the element.

Contributing

Making a Build

To make a build of the distributables into dist/ in the cloned repository run

npm install
node build

Running the tests

Tests can run in the browser by opening a webserver and visiting the test.html page. Automated tests that run the tests from the command line in Firefox can be run with

npm test