How to use the can.List function in can

setup: function () {
                    /* jshint ignore:start */

                    var numberOfItems = this.results.attr('numberOfItems');
                    var values = this.makeArray(numberOfItems);

                    var source = new can.List();

                    values.forEach(function (element) {
                        source.push(element);
                    });

                    /* jshint ignore:end */
                },
                fn: function () {

setup: function () {
                    /* jshint ignore:start */

                    var numberOfItems = 100000;
                    var batchCount = this.results.attr('numberOfItems');
                    var values = this.makeArray(numberOfItems);
                    var source = new can.List();

                    values.forEach(function (element, index) {
                        source.push(element);
                    });

                    var filtered = source.dFilter(this.makePredicateFn());

                    /* jshint ignore:end */
                },
                fn: function () {

setup: function () {
                    /* jshint ignore:start */

                    var numberOfItems = this.results.attr('numberOfItems');
                    var values = this.makeArray(numberOfItems);
                    var source = new can.List();

                    values.forEach(function (element) {
                        source.push(element);
                    });

                    var updateIndex = source.attr('length') - 1;
                    var element = source.attr(updateIndex);
                    var filtered = source.dFilter(this.makePredicateFn());

                    /* jshint ignore:end */
                },
                fn: function () {

window.setup = function () {
		// Create a list
		window.list = new can.List();

		// Activate the sort plugin
		window.list.attr('comparator', can.List.prototype._comparator);

		// Start the clock
		window.s = +new Date();

		// Reset
		window.probe1 = 0;
		window.probe2 = 0;
	};

var ResultMap = can.Map.extend({
    define: {
        runTest: {
            type: 'boolean',
            value: true
        },
        numberOfItems: {
            type: 'number'
        },
        '*': {
            value: '-'
        }
    }
});

var testResults = new can.List([
    new ResultMap({ runTest: true, numberOfItems: 1 }),
    new ResultMap({ runTest: true, numberOfItems: 10 }),
    new ResultMap({ runTest: true, numberOfItems: 100 }),
    new ResultMap({ runTest: true, numberOfItems: 1000 }),
    new ResultMap({ runTest: true, numberOfItems: 10 * 1000 }),
    new ResultMap({ runTest: true, numberOfItems: 100 * 1000 }),
]);

var benchmarkSuite = new Benchmark.Suite('can.derive.List.dFilter')
    .on('cycle', function (ev) {
        var benchmark = ev.target;
        var averageMs = (benchmark.stats.mean * benchmark.adjustment) * 1000;

        console.log(benchmark.toString() +
            ' [Avg runtime: ' + averageMs + ']');

var can = require('can');
	var stache = require('can/view/stache/stache');
	var simpleDom = require('can-simple-dom');

	can.document = new simpleDom.Document();

	var template = stache(
		"{{#each boxes}}"+
			"<div class="box-view">"+
				"<div style="{{style}}" id="box-{{number}}" class="box">"+
					"{{content}}"+
				"</div>"+
			"</div>"+
		"{{/each}}");

	var boxes = new can.List(),
		Box = can.Map.extend({
			top: 0,
		    left: 0,
		    content: 0,
		    count: 0,

		    tick: function() {
		        var count = this.attr('count') + 1;

		        this.attr('count', count);
		        this.attr('top', Math.sin(count / 10) * 10);
		        this.attr('left', Math.cos(count / 10) * 10);
		        this.attr('color', count % 255);
		        this.attr('content', count % 100);
		        this.attr('style', this.computeStyle());

import can from 'can';
import superMap from 'can-connect/can/super-map/';
import tag from 'can-connect/can/tag/';
import 'can/map/define/define';
import io from 'steal-socket.io';
const socket = io();

export const Server = can.Map.extend({
  define: {}
});

Server.List = can.List.extend({
  Map: Server
}, {});

export const serverConnection = superMap({
  url: '/amity/servers',
  idProp: 'name',
  Map: Server,
  List: Server.List,
  name: 'server'
});

tag('server-model', serverConnection);

socket.on('servers created', server => serverConnection.createInstance(server));
socket.on('servers updated', server => serverConnection.updateInstance(server));
socket.on('servers removed', server => serverConnection.destroyInstance(server));

"{{#each tasks}}"+
			"<li class="{{#if completed}}completed{{/if}}">"+
				"{{name}}"+
			"</li>"+
		"{{/each}}"+
	"");

	var tasks = new can.List([
			{name: "Mow lawn", completed: false},
			{name: "Walk dog", completed: true}
		]);

	var frag = template({tasks: tasks});

	var template = can.stache("<ul>...</ul>"),
	tasks = new can.List([
		{name: "Do dishes", completed: false},
		{name: "Walk dog", completed: true}
	]),
	frag = template({tasks: tasks});

	var template = stache(
		"{{#each boxes}}"+
			"<div class="box-view">"+
				"<div style="top: {{top}}px; left: {{left}}px; background: rgb(0,0,{{color}});" id="box-{{number}}" class="box">"+
					"{{content}}"+
				"</div>"+
			"</div>"+
		"{{/each}}");


	var boxes = new can.List([]),