Arrays

In Lava, arrays are added to objects just as other scalar properties are, but when you add an array property to an object, additional functionality is given to the array to support binding. Unlike other data binding frameworks, there is no messy sntax with Lava arrays. Let's look at a simple example of adding an array property to an Object.

var Person = Lava.Object({
    contacts: []            
});

Yes, it's that simple! To manipulate the array, there are intuitive methods like add(), addAt(), remove(), and removeAt().

// Let's assume that Contact is a valid Lava Object
// example of add()
Person.contacts.add(Contact.clone());

// example of addAt().  We will add an Object at index 0.
Person.contacts.addAt(0, Contact.clone());

// example of remove()
Person.contacts.remove(myContact);

// example of removeAt().  We will remove the Object at index 0.
Person.contacts.removeAt(0);

// example of empty().  We will empty the entire array.
Person.contacts.empty();

// example of fill().  We will fill the array with a Lava.Array.
Person.contacts.fill(Lava.Array(data, Contact));

// example of where().  We will find all of the items in the array that match a set of conditions.
// This example will return all contacts whose firstName starts with the letter 'A'.
Person.contacts.where(function (x) { return x.firstName.lastIndexOf('A', 0) === 0;  });

// example of first().  We will find the first item in the array that matches a set of conditions.
// This example will return the first contact in the array whose firstName begins with the letter 'A'.
Person.contacts.first(function (x) { return x.firstName.lastIndexOf('A', 0) === 0;  });

To add items to the array at the time of declaration or when you wish to add several items at once, the syntax is a bit different due to the fact that Lava needs the items that make up the array to be Lava.Object's to allow for data binding.

// example of an array of objects
var Person = Lava.Object({
    contacts: Lava.Array([
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' }
    ])           
});

// example of an array of numbers
var Person = Lava.Object({
    contacts: Lava.Array([1, 2, 3, 4, 5])           
});

Passing the array to Lava.Array() takes care of mutating each element in the array into a new Lava.Object. When binding, the syntax is going to be identical to the normal binding syntax for an array of objects. While, the array of scalars has a slightly different syntax as expressed below.

<ul data-bind="{foreach: Person.contacts}">
    <li data-template="{text: [i].value}"></li>
</ul>

Notice how we use a property named value to bind the scalar properties.

If there is already a Lava.Object defined that you wish the array to be comprised of, you can specify this in the second argument of the Lava.Array function.

var Contact = Lava.Object({
    id: null,
    name: null
});

var Person = Lava.Object({
    contacts: Lava.Array([
        { id: 1, name: 'item 1' },
        { id: 2, name: 'item 2' },
        { id: 3, name: 'item 3' }
    ], Contact)           
});

Last edited Dec 27, 2013 at 5:09 PM by tjscience, version 5

Comments

No comments yet.