splice
Insert and remove elements from a List.
list.splice(index[, howMany[, ...newElements]])
Parameters
- index
{Number}
:where to start removing or inserting elements
- howMany
{Number}
:the number of elements to remove If howMany is not provided,
splice
will remove all elements fromindex
to the end of the List. - newElements
{*}
:elements to insert into the List
Returns
{Array}
:
the elements removed by splice
splice
lets you remove elements from and insert elements into a List.
This example demonstrates how to do surgery on a list of numbers:
var list = new List([0, 1, 2, 3]);
// starting at index 2, remove one element and insert 'Alice' and 'Bob':
list.splice(2, 1, 'Alice', 'Bob');
list.attr(); // [0, 1, 'Alice', 'Bob', 3]
Events
splice
causes the List it's called on to emit change events,
add events, remove events, and length events. If there are
any elements to remove, a change event, a remove event, and a
length event will be fired. If there are any elements to insert, a
separate change event, an add event, and a separate length event
will be fired.
This slightly-modified version of the above example should help
make it clear how splice
causes events to be emitted:
var list = new List(['a', 'b', 'c', 'd']);
list.bind('change', function(ev, attr, how, newVals, oldVals) {
console.log('change: ' + attr + ', ' + how + ', ' + newVals + ', ' + oldVals);
});
list.bind('add', function(ev, newVals, where) {
console.log('add: ' + newVals + ', ' + where);
});
list.bind('remove', function(ev, oldVals, where) {
console.log('remove: ' + oldVals + ', ' + where);
});
list.bind('length', function(ev, length) {
console.log('length: ' + length + ', ' + this.attr());
});
// starting at index 2, remove one element and insert 'Alice' and 'Bob':
list.splice(2, 1, 'Alice', 'Bob'); // change: 2, 'remove', undefined, ['c']
// remove: ['c'], 2
// length: 5, ['a', 'b', 'Alice', 'Bob', 'd']
// change: 2, 'add', ['Alice', 'Bob'], ['c']
// add: ['Alice', 'Bob'], 2
// length: 5, ['a', 'b', 'Alice', 'Bob', 'd']
More information about binding to these events can be found under [can.List.attr attr].