Seemple#bindNode is the only method of the Seemple class which is responsible for changing DOM (except array renderer). It creates a bridge between value of a property and state of HTML node on the page: from a simple input to a complicated widget (the complexity of elements is unlimited). After using this method, it isn't necessary to monitor the synchronizations between model and view.

Note that the method has static alternative, which works just the same but accepts any object as the first argument, shifting rest arguments to the right.

const bindNode = require('seemple/bindnode');
const object = {};
bindNode(object, key, node, binder, eventOptions);
// instead of this.bindNode(key, node, binder, eventOptions);

The method acepts three arguments: a property name, HTML node and a binding rule (a binder). In its turn, a binder is an ordinary object and it can have the following properties: on, getValue, setValue, initialize, destroy (Read more here: binder). All the five properties are optional. It also allows to declare one-way data bindings (any direction).

The bindNode method supports the many-to-many bindings. Several elements can be bound to one property and several properties can be bound to one element, including ones from different instances of various classes.

this.bindNode('myKey', '.my-element', {
    on: 'click',
    getValue() { ... },
    setValue() { ... }
});

For example, you want to bind a property of an object to a input[type="checkbox"] node:

this.bindNode('myKey', '.my-checkbox', {
    // when is element state changed?
    // - after 'click' event
    on: 'click',
    // how to extract element state?
    // - return 'checked' value
    getValue() {
        return this.checked;
    },
    // how to set element state?
    // - set 'checked' value
    setValue(v) {
        this.checked = !!v;
    }
});

After binding is declared, you can set value of an object property in your most habitual way and HTML node (in this case, a checkbox) will change its state immediately. After clicking on the checkbox, the property value will be changed to the corresponding one as well.

// sets checked = true
this.myKey = true;

More complicated example: binding object property to jQuery UI widget

<div class="my-slider"></div>

this.bindNode('myKey', '.my-slider', {
    // when is element state changed?
    // - after 'slide' event
    on: 'slide',
    // how to extract element state?
    // - return 'value' of the widget
    getValue() {
        return $(this).slider('option', 'value');
    },
    // how to set element state?
    // - set 'value'
    setValue(v) {
        $(this).slider('option', 'value', v);
    },
    // how to initialize the widget?
    // you can initialize the slider in any way,
    // but 'initialize' function provides some syntactic sugar
    initialize() {
        $(this).slider({ min: 0, max: 100 });
    }
});

// will set the slider value 42
this.myKey = 42;

It looks easy but you may ask a question: "What should I do to avoid writing these rules every time?". Indeed, there can be a lot of elements of the same type on the page: text fields, drop down menus, fields from the HTML5 specification as well as third party widgets (see the example above).

As observed in this documentation, the third argument is not obligatory for the ones of the bindNode method (see below). This problem is solved by the Seemple.defaultBinders array which contains functions checking an HTML node against a set of rules and returns corresponding binder or undefined. You get an opportunity to reduce your code a great deal, putting binding rules into a separate part of your code and to use a syntax for binding without the third argument:

this.bindNode('myKey', '.my-element');

How to do it? You should add a function checking your element against a set of rules to the beginning of the Seemple.defaultBinders array.

const checkboxBinder = () => {
    return {
        on: 'click',
        getValue() {
            return this.checked;
        },
        setValue(v) {
            this.checked = !!v;
        }
    }
};

// the unshift method adds the function
// to the beginning of the Seemple.defaultBinders array
Seemple.defaultBinders.unshift(node => {
    // check if the element is a checkbox
    if(node.tagName == 'INPUT' && node.type == 'checkbox') {
        // if checking is OK, return a new binder
        return checkboxBinder();
    }
});

this.bindNode('myKey', '.my-checkbox');
this.myKey = true;

What should you do if you need to pass arguments for initializing some plugin or a widget? You can call the function that returns a binder manually.

const uiSlider = (min, max) => {
    return {
        on: 'slide',
        getValue() {
            return $(this).slider('option', 'value');
        },
        setValue(v) {
            $(this).slider('option', 'value', v);
        },
        initialize() {
            $(this).slider({ min: min, max: max });
        }
    }
};

this.bindNode('myKey1', '.my-slider1', uiSlider(0, 100));
this.bindNode('myKey2', '.my-slider2', uiSlider(1, 1000));
this.myKey1 = 42;
this.myKey2 = 999;

For global access to the binder you can add new property to Seemple.binders.

Seemple.binders.uiSlider = uiSlider;
// ...
this.bindNode('myKey1', '.my-slider1', Seemple.binders.uiSlider(0, 100));
this.bindNode('myKey2', '.my-slider2', Seemple.binders.uiSlider(1, 1000));

Seemple.defaultBinders OOB has a support for all form elements without any exception: select (including multiple), textarea, output, input (including all types from the specification of HTML5: text, checkbox, radio, range, number, date, search, time, datetime, datetime-local, color and others). That means it is not necessary to designate a binder for standard elements.

<input type="color" class="my-color-input">

this.bindNode('myColor', '.my-color-input');
this.myColor = '#66bb6a';

Besides, after the binding, a new non-standard :bound(KEY) CSS selector is available for you.

this.bindNode('myKey', '.my-element');

// will find the element '.my-inner-element' inside '.my-element'
this.bindNode('myAnotherKey', ':bound(myKey) .my-inner-element');

And the syntax of possible event names is extended:

this.bindNode('myKey', '.my-element');

// will handle the click on the '.my-element' element
this.on('click::myKey', () => { ... });

// will handle the click on the '.my-element .my-inner-element'
this.on('click::myKey(.my-inner-element)', () => { ... });

If a node is not found "Bound element is missing" error will be thrown. Check out Seemple#bindOptionalNode.

Sandbox definition

Seemple#bindNode can associate a class instance with the "main" HTML element on the page creating so-called sandbox. It is necessary to limit the instance influence on other HTML nodes. A special property sandbox is used for binding a sandbox.

<div class="my-sandbox">
    <!-- your HTML code -->
</div>

this.bindNode('sandbox', '.my-sandbox');

The definition of the sandbox adds lots of conveniences for you. For example:

• allows to use the Seemple#select and Seemple#$ methods
• adds a new :sandbox selector for the Seemple#bindNode, Seemple#select, Seemple#$ methods and others
• adds syntactic sugar for delegated DOM events in the Seemple#on method

Keep in mind that you can bind only one sandbox element to sandbox property. You can try Seemple#bindSandbox which does the same thing but removes previous binding.

// declare a sandbox
this.bindNode('sandbox', '.my-sandbox');

// .my-element is being searched for in the sandbox
this.bindNode('myKey', ':sandbox .my-element');

// it is not required to specify a key
// for the delegated events inside a sandbox
this.on('click::(.my-button)', () => { ... });

// will put the .inner-node element
// which is inside the sandbox into the console
console.log(this.$('.inner-node'));

Important features of the method and special flags

The fourth argument of bindNode method is eventOptions. As usual this object can include special flags or custom data which will be passed to bind and bind:KEY event handlers.

this.on('bind:x', evt => {
    console.log(evt.foo); // bar
});
this.bindNode('x', node, binder, { foo: 'bar' });

To understand important features of bindNode it is required to read information below but it's not required to remember all these flags.

A flag exactKey=false

If key string includes a dot then such string will be interpreted as a path to a property of nested object. Seemple will listen all changes of given object tree.

this.a = { b: { c: 'foo' } };
this.bindNode('a.b.c', node);

this.a.b.c = 'bar'; // updates node by bar

const oldB = this.a.b;

this.a.b = { c: 'baz' }; // updates node by baz

// node is not updated because
// the connection with the object subtree is destroyed
oldB.c = 'fuu';

In case if you need to use property name as is, use exactKey flag with true value.

this['a.b.c'] = 'foo';
this.bindNode('a.b.c', node, binder, {
    exactKey: true
});
this['a.b.c'] = 'bar';

A flag getValueOnBind

When getValue is given then a state of an element will be extracted and assigned to bound property immediately after bindNode call in case if the property has undefined value. To force this behavior even if the property has non-undefined value use getValueOnbind flag with true value. To cancel this behavior use the same flag with false value.

A flag setValueOnBind

When setValue is given then the value of the property will be set as element state immediately after bindNode call in case if the property has non-undefined value. To force this behavior even if the property is undefined use setValueOnBind flag with true value. To cancel this behavior use the same flag but with false value.

Flags debounceGetValue=true and debounceSetValue=true

One of the most important feature of bindNode is that the logic of property change and the logic of element state change uses debounce pattern. It means that if bound property is changed many times in a short time then bound element state will be updated only once after small delay (thanks to debounceSetValue=true). If element state is changed many times in a short time (eg corresponding DOM event is triggered), the property gets new value only once after minimum delay (thanks to debounceGetValue=true).

const input = document.querySelector('.my-input');
this.bindNode('x', input);
this.x = 'foo';
console.log(input.value === 'foo'); // false
setTimeout(() => {
    console.log(input.value === 'foo'); // true
});

To cancel this behavior (e. g. initiate synchronous binding) use debounceSetValue and/or debounceGetValue flags with false value.

Flags debounceSetValueOnBind=false and debounceGetValueOnBind=false

As described above bindNode uses debounce pattern on property change and on bound node change. This doesn't apply to a moment when bindNode is called. To remind, when the method is called a property or a node is changed immediately. When debounceGetValueOnBind and/or debounceSetValueOnBind are set to true then debounce is turned on for binding initialization as well.

Flags debounceSetValueDelay=0 и debounceGetValueDelay=0

These flags allow to set debounce delay. debounceSetValueDelay is used when debounceSetValue or debounceSetValueOnBind is true, debounceGetValueDelay is used when debounceGetValue or debounceGetValueOnBind is true.

A flag useExactBinder=false

Even if you pass a binder to bindNode, the framework tries to find default binder at Seemple.defaultBinder and extend it by properties of the passed object. This feature makes possible to use partially re-defined default binder.

For example, we want to bind input[type="text"] to a property. By default, the standard binder contains "on" property with "input" value for this kind of node. It means that the value of the instance property and node state will be synchronized when a user releases a key of the keyboard or pastes text from clipboard. In case if you want synchronization to be performed after the "blur" DOM event, you need to pass an object containing the only "on" property as the third argument. This object will extend the default binder, having retained getValue and setValue values.

this.bindNode('myKey', '.my-input', { on: 'blur' });

To cancel this behavior and use the binder as is, you can use useExactBinder flag with true value.

this.bindNode('x', node, binder, {
    useExactBinder: true
});

To the Seemple#bindNode method an object can be passed to avoid multiple invocation of the method and reduce code. Keys of the object are property names and values can get the following look:

• A node
• An object with properties node and binder
• An array of objects with properties node and binder

If binder arg is passed as the second argument then it wil be used as the binder for those elements for which a binder wasn't specified.

The method variation allows to pass an array of objects which need to include the following properties:

• key - a property name
• node - an HTML element which must be bound to a key
• binder - a binder (optional)
• event - event options (optional)

The second arg object includes common event options for all bindings and extends event object (properties from event has more priority).

The method has static alternative

Unbinds previous sandbox (if exists) and binds new one.

The method has static alternative

calc creates a dependency of a property (target argument) on values of other properties (source argument). When source property is changed, target is re-calculated automatically.

Note that the method has static alternative, which works just the same but accepts any target object as the first argument, shifting rest arguments to the right.

const calc = require('seemple/calc');
const object = {};
calc(object, target, source, handler, eventOptions);
// instead of this.calc(target, source, handler, eventOptions);

source arg has few variations.

A string

A target property is dependent on source property.

this.b = 1;
this.calc('a', 'b', b => b * 2);
console.log(this.a); // 2

An array of strings

A target is dependent on properties listed at source array.

this.b = 1;
this.c = 2;
this.d = 3;
this.calc('a', ['b', 'c', 'd'], (b, c, d) => b + c + d);
console.log(this.a); // 6

An object with properties object and key

At this case target property is dependent on a property from another object.

const someObject = { b: 1 };
this.calc('a', {
    object: someObject,
    key: 'b'
}, b => b * 2);

console.log(this.a); // 2

key property also accepts an array of property names.

const someObject = {
    b: 1,
    c: 2,
    d: 3
};
this.calc('a', {
    object: someObject,
    key: ['b', 'c', 'd']
}, (b, c, d) => b + c + d);

console.log(this.a); // 6

An array of object with properties object и key

This variation allows to define dependency from properties of different objects.

const someObjectX = {
    b: 1,
    c: 2
};
const someObjectY = {
    d: 3
};
this.calc('a', [{
    object: someObjectX,
    key: ['b', 'c']
}, {
    object: someObjectY,
    key: 'd'
}], (b, c, d) => b + c + d);

console.log(this.a); // 6

A combination of strings (own properties) and objects

this.b = 1;
this.c = 2;

const someObject = {
    d: 3,
    e: 4
};

this.calc('a', ['b', 'c', {
    object: someObjectX,
    key: ['d', 'e']
}], (b, c, d, e) => b + c + d + e);

console.log(this.a); // 10

For reasons of code purity, the combination of strings and objects inside source array is not recommended. Instead, pass an object whose object property refers to source object. An example below makes the same job as shown at the previous example.

this.b = 1;
this.c = 2;

const someObject = {
    d: 3,
    e: 4
};

this.calc('a', [{
    object: this, // the target object is "this"
    keys: ['b', 'c']
}, {
    object: someObjectX,
    key: ['d', 'e']
}], (b, c, d, e) => b + c + d + e);

console.log(this.a); // 10

A path to source property

If source property name includes a dot then the method initiates a dependency on a property from nested object.

this.b = { c: { d: 1 } };
this.e = { f: { g: 2 } };

this.calc('a', ['b.c.d', 'e.f.g'], (d, g) => d + g);

console.log(this.a); // 3

The same thing works for external sources.

this.b = { c: { d: 1 } };
const someObject = { e: { f: { g: 2 } } };

this.calc('a', [{
    object: this
    key: 'b.c.d'
}, {
    object: someObject
    key; 'e.f.g'
}], (d, g) => d + g);

console.log(this.a); // 3

The method is protected from circular references (for example, a depends on b, b depends on c and c depends on a) and if there is a calculation error, it does not block the page and does not throw an exception about the stack over-flow.

As you may noticed, arguments of handler function always follow the same order as source properties appear.

In case if you want to change a value of one source property and make it so that target property will not be recalculated, then use Seemple#set method with skipCalc flag.

this.calc('a', 'b', handler);
this.set('b', newValue, {
    skipCalc: true
});

Important features of the method and special flags

The fourth argument of calc method is eventOptions. As usual this object can include special flags or custom data which will be passed to change:TARGET event handler.

this.on('change:a', evt => {
    console.log(evt.foo); // 'bar'
});

this.calc('a', source, handler, { foo: 'bar' });

A flag debounceCalc=true

After calc is called, target property is calculated with no delays. But when source property is changed the debounce pattern is used. That means that target property will be changed in few milliseconds and only once even if source properties was changed many times in a short time.

this.b = 1;
this.c = 2;
this.d = 3;

this.calc('a', ['b', 'c', 'd'], (b, c, d) => b + c + d);

this.on('change:a', () => {
    // the handler will be called only once
    // despite that source properties was changed thrice
    console.log(`a is changed to ${this.a}`); // a is changed to 60
});

this.b = 10;
this.c = 20;
this.d = 30;
console.log(this.a); // 6 instead of 60

To cancel debounce pattern when source properties are changed, in other words to make the calculation synchronously (as it was in previous versions of the method) pass debounceCalc with false value to the method.

this.b = 1;
this.c = 2;
this.d = 3;

this.calc('a', ['b', 'c', 'd'], (b, c, d) => b + c + d, {
    debounceCalc: false
});

this.on('change:a', () => {
    // the handler will be called thrice
    // every time when b, c or d are changed

    // a is changed to... 15, 33, 60
    console.log(`a is changed to ${this.a}`);
});

this.b = 10;
this.c = 20;
this.d = 30;
console.log(this.a); // 60

A flag debounceCalcOnInit=false

As described above, target property is calculated immediately after the calc is called. To turn on debounce on calc call pass debounceCalcOnInit with true value to the method.

this.on('change:a', () => {
    // the handler will be called only once in a moment
    console.log(`a is changed to ${this.a}`); // a is changed to 6
});

this.b = 1;
this.c = 2;
this.d = 3;

this.calc('a', ['b', 'c', 'd'], (b, c, d) => b + c + d, {
    debounceCalcOnInit: true
});

console.log(this.a); // undefined

In real world debounceCalcOnInit flag is unlikely to be useful. Just keep in mind that you can enable "total debounce" if needed.

A flag debounceCalcDelay=0

The flag can be used to set debounce delay when debounceCalc or debounceCalcOnInit is set as true.

A flag setOnInit=true

It is known that target property gets new value after calc is called. To cancel this behavior and don't calculate a property immediately use setOnInit with false value.

this.calc('a', 'b', b => b * 2, {
    setOnInit: false
});

console.log(this.a); // undefined

// but if this.b is changed the target property will be calculated
this.b = 1;

A flag exactKey=false

As described above, it's possible to use a path to source property using a string that contains dots. In case if you need to use exact name of source property use exactKey with true value.

this['foo.bar.baz'] = 1;
this.calc('a', 'foo.bar.baz', fooBarBaz => fooBarBaz * 2, {
    exactKey: true
});
console.log(this.a); // 2

A flag promiseCalc=false

This flag allows to return Promise instance from the calculating function. Target property gets its value from resolved promise.

Warning! Promise cannot be canceled. Use the promiseCalc feature carefully and don't allow multiple calls of heavy functions.

this.calc('a', ['b', 'c'], (b, c) => {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(a + b)
        }, 1000);
    });
}, {
    promiseCalc: true
});

this.b = 1;
this.c = 2;

// "a" will be changed in a second

this.calc('response', 'data', async (data) => {
    const resp = await fetch(url, {
        method: 'post',
        body: data
    });

    return resp.json();
}, {
    promiseCalc: true
});

The first argument is an object whose keys are property names and values are objects with the following data:

• source - which properties the target property is depended on;
• handler - a function which returns a new value of a property (by default it equals to (value) => value);
• event - event options.

The second argument contains common event options which extend event of every item (properties of event have higher priority).

source can take any kind of look as described above (a string, an array of strings etc).

Note that the method has static alternative.

The method creates and fixes an instance of a class as given property value. When you try to override the property, instead of actual overriding, the instance is updated. Thus, we achieve integrity of an application, made on with Seemple.js.

The method is an addon over Seemple#mediate and it overrides a mediator.

Class instance is being created during the call of instantiate method. The current property value becomes the first argument of the class constructor. Provisions should be made so that either undefined (if a property hasn't contained any data before), or an object you should do something with (for example, to extend class instance by object properties) will get into the class constructor.

It looks easy in practice: you create an ordinary class which almost always receives some data to be handled (for example, to use it at Seemple.Object#setData method).

While attempting to assign another value (an object or an array) to the property, the inner mechanism of instantiate method performs the following instead of the actual assignment:

• If updateCallback function is given, the method calls it with two arguments: current property value and the data which code is trying to assign.
• If given class is inherited from Seemple.Object, the instance is updated with new data using Seemple.Object#setData method.
• If given class is inherited from Seemple.Array, the instance is updated with new data using Seemple.Array#recreate method.
• If updateCallback function isn't given and the class isn’t inherited from Seemple.Object or Seemple.Array, the instance is extended by object properties which is trying to be assigned.

A feature of this method is an absence of limitations on the class source. Any function-constructor that can be initialized using new operator and not only Seemple's successors can act as a class.

This method is used for transforming property value on its changing. For example, you want the property value to be always either of a certain type or an integer value, or to be no less than zero and no more than a hundred etc.

Note that the method has static alternative, which works just the same but accepts any target object as the first argument, shifting rest arguments to the right.

const mediate = require('seemple/mediate');
const object = {};
mediate(object, key, mediator);
// instead of this.mediate(key, mediator);

It deletes a handler which has been created before. All the three arguments are optional. You can delete both all the events (without passing any argument) and separate ones (having passed only the event name, the event name and the handler, the event name and the handler and the context).

The method adds an event handler for an instance of the Seemple class. Refer to the complete list of possible events with the description here: eventNames.

Note that the method has static alternative, which works just the same but accepts any target object as the first argument, shifting rest arguments to the right.

const on = require('seemple/on');
const object = {};
on(object, names, callback, triggerOnInit, context);
// instead of this.on(names, callback, triggerOnInit, context);

In the Seemple#on method the object with the key-element pairs can be passed to avoid multiple invocation of the method and reduce your code.

The method allows to add an event handler to an instance of the Seemple class, debouncing the handler. Callback function can be called only once during a definite period of time. As to the rest the method works the same as Seemple#on.

The method has static alternative.

The method works the same as Seemple#on but the passing handler can be called only once.

Note that the method has static alternative

Starting with 1.1 version, Seemple includes a simple DOM parser that handles double braced syntactic constructions. parseBindings method receives HTML string, DOM node or selector corresponding to DOM node as the first argument.

As the method is DOM template engine (and not HTML-replace parser), all child DOM nodes of the passed element remain in their same state (for example, DOM events aren’t erased).

The supported syntax

1. HTML binding ```html <!-- will create text node in place of {{user.name}} and will bind name property from user object to this node JS: this.user = {name: 'Joe'}

--> Hello, {{user.name}}

2. Binding form elements.
```html
<!--
will bind "x" instance property to a text field (two-way data binding)
JS: this.x = 'some value';
-->
<input type="text" value="{{x}}">
<!--
For binding textarea and select you should use value attribute
-->
<textarea value="{{x}}"></textarea>
<select value="{{x}}">...</select>
<!--
will bind "x" instance property to a checkbox (two-way data binding)
JS: this.x = true;
-->
<input type="checkbox" checked="{{x}}">

3. Attributes binding. ```html <!-- href attribute value will depend on "category" and "someObject.page" value (one-way data binding) JS: this.category = 'seemple'; this.someObject = { page: 42 };

--> A link

```

If you want to use something else instead of braces look at Seemple.parserBrackets

Why do we need this method?

In case if you develop a large form with standard HTML5 fields, the method will help you save time on declaring numerous bindings. Besides, parseBindings is useful in case of creating a very simple collection which doesn’t require implementation of a complicated model.

The method is very similar to Seemple#selectAll, but it returns only one element or null.

The method has static alternative

After sandbox declaration using Seemple#bindNode method, you can get its descendants. Besides, the method supports the :bound(KEY) selector.

The method has static alternative

The list of the supported flags:

• silent - do not call the change and change:KEY events
• silentHTML - do not change states of bound HTML nodes
• force - call the change and change:KEY events even though the property value has not been changed
• forceHTML - change a state of bound element even though the property value has not been changed. This option is usable if the bound element has been rendered after the binding (for example, some option tags have been added to select tag)
• skipMediator - prevents the property transformation by a mediator (see Seemple#mediate)
• skipCalc - prevents the work of dependencies created with Seemple#calc

The method has static alternative.

After adding event handlers using Seemple#on, Seemple#onDebounce or Seemple#once, any event can be fired manually using this method.

Note that the method has static alternative

Using this method you can delete the binding between a property and HTML node, which has been added recently and no longer needed.

The variation makes possible to pass an array which includes objects with the following properties:

• key - a property name
• node - a node bound to key (optional)

This variation is useful because it matches one variation of Seemple#bindNode method, allowing to store bindings in a variable to easily remove them when needed.

The Class function allows to use the classic OOP when ECMAScript 2015 classes cannot be used somehow.

This static method works the same as Seemple#bindNode and all its variations, but accepts any kind of JavaScript object as first argument.

This static method works the same as Seemple#bindOptionalNode and all its variations, but accepts any kind of JavaScript object as first argument.

This static method works the same as Seemple#bindSandbox and all its variations, but accepts any kind of JavaScript object as first argument.

This static method works the same as Seemple#calc and all its variations, but accepts any kind of JavaScript object as first argument.

The function accepts any object and returns an instance of externally inaccessible class which adopts universal methods allowing them to be called in a chain to change given object.

Universal method is a method which exist at Seemple prototype and have a static alternative (e. g. Seemple#bindNode and Seemple.bindNode)

This static method works the same as Seemple#instantiate and all its variations, but accepts any kind of JavaScript object as first argument.

Returns a binder corresponding to an element. If it is not found, it returns undefined. The function uses Seemple.defaultBinders for the search.

This static method works the same as Seemple#mediate and all its variations, but accepts any kind of JavaScript object as first argument.

This static method works the same as Seemple#off and all its variations, but accepts any kind of JavaScript object as first argument.

This static method works the same as Seemple#on and all its variations, but accepts any kind of JavaScript object as first argument.

This static method works the same as Seemple#onDebounce and all its variations, but accepts any kind of JavaScript object as first argument.

This static method works the same as Seemple#once and all its variations, but accepts any kind of JavaScript object as first argument.

This static method works the same as Seemple#parseBindings and all its variations, but accepts any kind of JavaScript object as first argument.

This static method works the same as Seemple#remove and all its variations, but accepts any kind of JavaScript object as first argument.

This static method works the same as Seemple#select and all its variations, but accepts any kind of JavaScript object as first argument.

This static method works the same as Seemple#selectAll and all its variations, but accepts any kind of JavaScript object as first argument.

This static method works the same as Seemple#set and all its variations, but accepts any kind of JavaScript object as first argument.

This static method works the same as Seemple#trigger and all its variations, but accepts any kind of JavaScript object as first argument.

This static method works the same as Seemple#unbindNode and all its variations, but accepts any kind of JavaScript object as first argument.

By default, Seemple uses a library at window.$ reference. If there is no such a variable in the global namespace or it does not include a necessary set of methods, the built-in micro-library is used.

The useDOMLibrary method makes Seemple.js use a library you would like to use in spite of its absence in the global namespace or for a different reason (for example, if two different versions of jQuery are used on a page).

The value can be transformed using mappingFn argument.

The property value can be transformed using mappingFn argument.

The binder works the same way as Seemple.binders.display, but instead of visibility change the existence at page DOM is changed. The binder is useful for:

• Big appications: show one or another page depending on route state;
• For infinite scrolling;
• For other cases where you need to hide an element but its existence at DOM tree isn't necessary.

The property value can be transformed using mappingFn argument.

The property value can be transformed using mappingFn argument.

The property value can be transformed using mappingFn argument.

The property value can be transformed using mappingFn argument.

This method is used when you need to declare keys which are responsible for data but values of corresponding properties are not known yet.

This method is very similar to Array.prototype.forEach. It allows to iterate over data properties when for..of syntax is not available.

This method does two things:

1. Sets a specified value to a given property.

2. Adds a key to data keys list which it makes property available for using in the Seemple.Object#each, Seemple.Object#keys, Seemple.Object#toJSON and other methods.

When replaceData flag is set as true then all other properties will be removed from the list of data properties.

Apart from that, the method works the same as Seemple#set.

The method works recursively, calling toJSON for all internal properties which have such method. To cancel this behavior pass false as the only argument.

Seemple.Array includes all the methods existing in the native JavaScript Array:

• join
• pop
• push
• reverse
• shift
• unshift
• slice
• splice
• sort
• filter
• forEach
• some
• every
• map
• indexOf
• lastIndexOf
• reduce
• reduceRight
• copyWithin
• find
• findIndex
• fill
• includes
• entries
• keys
• concat

Yet they work the same as the Array.prototype. There are only a few remarks:

• The forEach method returns an array itself instead of undefined
• The methods which should return a new array (splice, slice, filter, map...) return a new Seemple.Array instance.
• The keys, values and entries methods return an array instead of an iterator.

Moreover, the methods generate events which are fired on any array modification. For more detailed information look at Seemple.Array.

Having found out more about Seemple.Array#METHOD, it becomes clear that the methods do not support an event object passing as they exactly duplicate the syntax and the number of arguments of the built-in Array. The METHOD_ syntax allows to pass some data to event handlers.

The list of available flags:

• silent - disables event triggering
• dontRender - disables rendering
• skipItemMediator - disables mediators and models

Every time items are added to an array, the built-in handler checks if added item is Model instance and converts it into the one if the check fails. It is recommended to inherit Model from the Seemple.Object or Seemple.Array class (in case if it is necessary to get a collection of collections) to get an opportunity of an array conversion into ordinary one by Seemple.Array#toJSON method.

Use Seemple.Array#mediateItem for more flexible control of an item class (for example, if you need to use one class for certain items and another one - for others).

This method is used to transform Seemple.Array items. Note that calling of this method overrides the Seemple.Array#Model property.

The virtual method can be used instead of "render" event handler.

At the same time onRender method is called in a rendered item with the only argument - an event object.

This method works almost like orderBy from lodash. It accepts a key or a list of keys as the first arg and an order (asc/desc) or a list of orders as the second arg.

The method allows to convert any array or array-like into the Seemple.Array instance. If nothing has been passed as the first argument, the instance is cleansed.

This method renders array items in an array container. If a node which is associated to an array item has already been created, the method reinserts it into container of the array instead of rerendering it all over again.

The method can be useful in case when items have been added to the array before declaring a sandbox or a container.

To force items rerender (e. g. you use custom template engine) pass a property forceRerender with true value to an event object.

In case if a collection is pre-rendered on the page (e. g. via webserver), the method can restore the collection from existing HTML nodes.

<!-- One, Two, Three are prerendered -->
<ul class="collection-node">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <script type="text/html" class="renderer">
        <li></li>
    </script>
</ul>

class MyModel extends Seemple.Object {
    constructor(data) {
        super(data);
        this.addDataKeys('value');
    }
    onRender() {
        this.bindNode('value', ':sandbox', Seemple.binders.html())
    }
});

class MyCollection extends Seemple.Array {
    get itemRenderer() {
        return ':sandbox .renderer';
    }
    constructor() {
        this
            .bindNode('sandbox', '.collection-node')
            .restore(':sandbox li');
    }
});

const myCollection = new MyCollection();
myCollection.push({
    value: 'Four'
});

console.log(myCollection.toJSON());
// [{value: 'One'}, {value: 'Two'}, {value: 'Three'}, {value: 'Four'}]

If selector arg isn't passed then the collection will be restored from child nodes that placed in a container ("container" or "sandbox").

The method fires "render" event and calls onRender and onItemRender functions (look at the docs) for every newly added item similar to usual rendering.

The method works recursively, calling toJSON for all items which have such method. To cancel this behavior pass false as the only argument.