Model arrays

Models are even cooler if you use them in combination with the PrioritisedArray. We'll go over some of the cool things you can do with this class.

Creating a model array

Creating a new array is as simple as extending the PrioritisedArray, and in your constructor call the super constructor with the type of model you want populated:

import {PrioritisedArray}   from 'arva-js/data/PrioritisedArray.js';
import {Monkey}               from './Monkey.js';

export class Monkeys extends PrioritisedArray {
    constructor() {
        super(Monkey);
    }
}

This will point to /Monkeys (the name of the array model) on the remote DataSource. If you want to use a custom path, you can pass in a DataSource with the custom path set as a second parameter to the super constructor of the PrioritisedArray.

Listening for new models in an array

If you want to be notified of new models being created at the path in the remote DataSource we're subscribed to, you can subscribe to the 'child_added' event emitted by the array:

import {Monkeys}             from './Monkeys.js';

let monkeys = new Monkeys();
monkeys.on('child_added', (monkey) => {
    console.log(`A new monkey appeared! His mood is ${monkey.currentMood}`);
});

Other events are:

• ready: the DataSource has finished loading all currently available data.
• value: every time a child is added, changed, moved, or removed, returns the entire array.
• child_changed: a child was changed.
• child_moved: a child was moved.
• child_removed: a child was removed.

Iterating over all items currently in the array

Since the PrioritisedArray extends the plain JavaScript Array object, we can use the ES6 array iterator in a 'for of' loop like this:

import {Monkeys}             from './Monkeys.js';

let monkeys = new Monkeys();
monkeys.on('ready', () => {
    for(let monkey of monkeys) {
        console.log(`Found a monkey: its mood is ${monkey.currentMood}`);
    }
});

Adding a new model to the array

There are two ways of adding a new model to our array, both of which result in a new model instance being added to the local array and the remote DataSource.

Adding a new model instance

import {Monkey}              from './Monkey.js';
import {Monkeys}             from './Monkeys.js';

let monkeys = new Monkeys();
let monkey = monkeys.add(new Monkey()); /* Returns the monkey instance passed to it */

/* Optionally, we now modify the monkey's properties */
monkey.currentMood = 'peaceful negotiations';

Adding plain properties

import {Monkey}              from './Monkey.js';
import {Monkeys}             from './Monkeys.js';

let monkeys = new Monkeys();
monkeys.add({
     currentMood: 'peaceful negotiations'
});

The PrioritsedArray uses the plain object we passed in as base data to construct a new Monkey instance with. This will add a new Monkey object to the array with the given properties already set.

Removing a model from the array

To remove a model from the array, simply call remove() on the model. This will remove it from the remote DataSource, which will be reflected in the local array:

import {Monkeys}             from './Monkeys.js';

let monkeys = new Monkeys();
monkeys.on('ready', () => {
    if(monkeys.length >= 1) {
        monkeys[0].remove();
    }
});

Two-way data binding model arrays to UI

You can create a scrollable view synchronised with a model array super easily with the DataBoundScrollView. Find out more in its docs.