Data Binding

From previous articles, you learned that Neft has three places, where you can handle your data:

  1. Routing,
  2. Views,
  3. Styles.

Each place is different and built for specified use-cases.

Data originally comes from routes and is propagated through views to styles.

Neft supports automatic updates, when you change data. It's called data binding.

For instance, in a route you created a list of records. Such list is rendered by one of your views. If you want to add another record, you just do it in a route, and views are automatically refreshed.

You need to remember, that such list need to be a Neft.List. Standard arrays are not supported, and your change won't be propagated.

To better understand how to use it, let's start from the beginning...

Signals

Signal is a function.

You can connect to it (listen on signals) and disconnect.

It can be emitted with parameters.

It's used in various Neft modules to support automatically data-binding. In most cases there is no need to create them manually.

const { signal } = Neft;
const onLoad = signal.create();
onLoad.connect((src) => console.log(`LOADED: ${src}`));
onLoad.emit('/logo.png');
// LOADED: /logo.png

Similar to events model well-known in other frameworks.

Do you remember that Signal is a function? It works like connect.

Both lines do the same:

onLoad.connect((src) => console.log(`LOADED: ${src}`));
onLoad((src) => console.log(`LOADED: ${src}`));

If you want to stop listening on a changes, call disconnect with registered listener.

const { signal } = Neft;
const onLoad = signal.create();
const logSrc = (src) => console.log(`LOADED: ${src}`);
onLoad(logSrc);
onLoad.disconnect(logSrc);
onLoad.emit('/logo.png'); // does nothing

Signals have a limit. You can emit up to two parameters in one call. The workaround is to emit an object.

Now you know how Neft propagates changes. Let's see how we can you this knowledge.

List

List is an observable version of standard arrays.

To create a list, call its constructor:

const { List } = Neft;
new List(); // empty list
new List([1, 2]); // list with two values: 1 and 2
List(); // *new* is optional

Data in a list can be modified. Basic methods are: append(), set(), insert() and pop().

const { List } = Neft;
const data = new List;

data.append('tree');
data.insert(0, 'house');
console.log(data[0]); // house
console.log(data[1]); // tree
console.log(data.length); // 2

data.pop();
console.log(data.length); // 1

data.set(0, 'ketchup');
console.log(data[0]); // ketchup

Each change in a list calls different signals:

  • onChange called when some value change,
  • onInsert called with added value,
  • onPop called with removed value.
const { List } = Neft;
const data = new List;

data.append('fries');
data.onPop((oldValue, index) => console.log(`${oldValue} has been removed`));

data.pop();
// fries has been removed

Dict

Dict is an observable version of standard objects.

To create a dict, call its constructor:

const { Dict } = Neft;
new Dict(); // empty dict
new Dict({ name: 'Johny' }); // dict with one key
Dict(); // *new* is optional

Data in a dict can be changed using the set() method.

const { Dict } = Neft;
const data = new Dict;

data.set('pet', 'cat');
console.log(data.pet); // cat

Each change in a dict emits onChange signal.

const { Dict } = Neft;
const data = new Dict;

data.onChange((key, oldValue) => console.log(`${key} now is equal ${data[key]}`));
data.set('pet', 'cat');
// pet now is equal cat

results matching ""

    No results matching ""