Example:

Related:

arrayDiff returns an object with attributes:
removed, added, and moved.
Every item in removed has the format: {item, index}
Every item in added has the format: {item, index}
Every item in moved has the format: {from_index, to_index}
Every item in index_changed has the format: {from_index, to_index}

When oldArray removes every item in removed, adds every item in added,
and moves every item in moved (in that order), it will result in an array
that is equivalent to newArray. Note: this function is used internally to
determine how to keep DOM nodes in sync with an underlying model with the
smallest number of modifications to the DOM tree.

.arrayDiff(from_val, to_val, [equality_check])

from_val

array[*]

The 'former' array

to_val

array[*]

The 'new' array

[equality_check]

function

A function that checks for equality between items

Returns

Object

added, removed, and moved items

Example:

Taking the diff between old_array and new_array with the default equality check

Create a new template. If context is specified, then this function returns a DOM node with the specified template.
Otherwise, it returns a function that can be called with context and [parent] to create a new template.

ConstraintJS templates use a (Handlebars)[http://handlebarsjs.com/]. A template can be created with
cjs.createTemplate. The format is described below.

Basics

ConstraintJS templates take standard HTML and add some features

Constraints

Unary handlebars can contain expressions.

<h1>{{title}}</h1>
<p>{{subtext.toUpperCase()+"!"}}</p>

called with { title: cjs('hello'), subtext: 'world'}:

<h1>hello</h1>
<p>WORLD!</p>

Literals

If the tags in a node should be treated as HTML, use triple braces: {{{ literal_val }}}.
These literals (triple braces) should be created immediately under a DOM node.

Comments

Constraint output

To call my_func on event (event-name), give any targets the attribute:

data-cjs-on-(event-name)=my_func

For example:

<div data-cjs-on-click=update_obj />

Will call update_obj (a property of the template's context when this div is clicked.

To add the value of an input element to the template's context, use the property data-cjs-out:

<input data-cjs-out=user_name />
<h1>Hello, {{user_name}}</h1>

Block Helpers

Loops

To create an object for every item in an array or object, you can use the {{#each}} block helper.
{{this}} refers to the current item and @key and @index refer to the keys for arrays and objects
respectively.

The splice() method changes the content of an array, adding new elements while removing old elements.

.splice(index, howMany, ...elements)

index

number

Index at which to start changing the array. If greater than the length of the array,
no elements will be removed.

howMany

number

An integer indicating the number of old array elements to remove.
If howMany is 0, no elements are removed. In this case, you should specify at least one new element.
If howMany is greater than the number of elements left in the array starting at index,
then all of the elements through the end of the array will be deleted.

...elements

*

The elements to add to the array. If you don't specify any elements,
splice simply removes elements from the array.

Returns

array.*

An array containing the removed elements. If only one element is removed,
an array of one element is returned. If no elements are removed, an empty array is returned.

Related:

A binding calls some arbitrary functions passed into options. It is responsible for keeping some aspect of a
DOM node in line with a constraint value. For example, it might keep an element's class name in sync with a
class_name constraint

Example:

Removes the first listener to callback that was created by onChange. thisArg is optional and
if specified, it only removes listeners within the same context. If thisArg is not specified,
the first callback is removed.

Example:

var x = cjs.fsm();
x.addState("b")
.addState("a");
var run_transition = x.addTransition("b");
//add a transition from a to b
window.addEventListener("click", run_transition);
// run that transition when the window is clicked

var x = cjs.fsm();
x.addState("b")
.addState("a")
.addTransition("b", cjs.on('click'));
// add a transition from a to b that runs when the window is clicked

var x = cjs.fsm("a", "b");
var run_transition = x.addTransition("a", "b"); //add a transition from a to b
window.addEventListener("click", run_transition); // run that transition when the window is clicked