DoneJS StealJS jQuery ++ FuncUnit DocumentJS
3.0.0
2.3.27

 

  • Github
  • Twitter
  • Chat
  • Forum
  • prototype
    • concat
    • forEach
    • indexOf
    • join
    • pop
    • push
    • replace
    • reverse
    • shift
    • slice
    • splice
    • unshift
  • static
    • can.List.Map
  • Bitovi
    • Bitovi.com
    • Blog
    • Consulting
    • Training
    • Open Source
  • Chat
  • Forum
  • Star
  • Follow @canjs
  • can.List
  • /
  • splice
  • / On this page
    • splice

      function

      Insert and remove elements from a List.

      • source

      list.splice(index[, howMany[, ...newElements]])

      Parameters

      1. index {Number}:

        where to start removing or inserting elements

      2. howMany {Number}:

        the number of elements to remove If howMany is not provided, splice will remove all elements from index to the end of the List.

      3. 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 can.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 can.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].

      CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 3.0.0.