Fuelux - how to use repeater

Question

I am trying to use Fuelux repeater for one of my projects but I cant figure out how to populate data using javascript. The examples they have provided use couple of other plugins(Require.js and underscore.js) and I am not familiar with those. Can someone please help me to do this without any other plugins. I removed all require methods in the code but that didnt work either. Please look at this fiddle for what I have so far.

/*!
 * JavaScript for Fuel UX's docs - Repeater Examples
 * Copyright 2011-2014 ExactTarget, Inc.
 * Licensed under the Creative Commons Attribution 3.0 Unported License. For
 * details, see http://creativecommons.org/licenses/by/3.0/.
 */

define function(require){
//  var $ = require('jquery');
//  var _ = require('underscore');
    var colors = {
        bug: '#A8B820',
        dark: '#705848',
        dragon: '#7038F8',
        electric: '#F8D030',
        fairy: '#EE99AC',
        fighting: '#C03028',
        fire: '#F08030',
        flying: '#A890F0',
        ghost: '#705898',
        grass: '#78C850',
        ground: '#E0C068',
        ice: '#98D8D8',
        normal: '#A8A878',
        poison: '#A040A0',
        psychic: '#F85888',
        rock: '#B8A038',
        steel: '#B8B8D0',
        water: '#6890F0'
    };
    var columns = [
        {
            label: 'Name',
            property: 'name',
            sortable: true
        },
        {
            label: 'Id',
            property: 'id',
            sortable: true
        },
        {
            label: 'Type',
            property: 'type',
            sortable: true
        },
        {
            label: 'Height (in)',
            property: 'height',
            sortable: true
        },
        {
            label: 'Weight (lbs)',
            property: 'weight',
            sortable: true
        },
        {
            label: 'Abilities',
            property: 'abilities',
            sortable: true
        },
        {
            label: 'Weakness',
            property: 'weakness',
            sortable: true
        }
    ];
    var delays = ['300', '600', '900', '1200'];
    var pokemon = [{
            "abilities": "Overgrow",
            "weight": "15.2",
            "weakness": "fire, flying, ice, psychic",
            "height": "28.0",
            "id": "001",
            "name": "Bulbasaur",
            "ThumbnailAltText": "Bulbasaur",
            "ThumbnailImage": "http://assets2.pokemon.com/assets/cms2/img/pokedex/detail/001.png",
            "type": "grass, poison"
        },
        {
            "abilities": "Overgrow",
            "weight": "28.7",
            "weakness": "fire, flying, ice, psychic",
            "height": "39.0",
            "id": "002",
            "name": "Ivysaur",
            "ThumbnailAltText": "Ivysaur",
            "ThumbnailImage": "http://assets3.pokemon.com/assets/cms2/img/pokedex/detail/002.png",
            "type": "grass, poison"
        },
        {
            "abilities": "Overgrow, Thick Fat",
            "weight": "342.8",
            "weakness": "fire, psychic, flying, ice",
            "height": "94.0",
            "id": "003",
            "name": "Venusaur",
            "ThumbnailAltText": "Venusaur",
            "ThumbnailImage": "http://assets4.pokemon.com/assets/cms2/img/pokedex/detail/003.png",
            "type": "grass, poison"
        }];
    var dataSource, filtering;

//  require('bootstrap');
//  require('fuelux');

    dataSource = function(options, callback){
        var items = filtering(options);
        var resp = {
            count: items.length,
            items: [],
            page: options.pageIndex,
            pages: Math.ceil(items.length/(options.pageSize || 50))
        };
        var i, items, l;

        i = options.pageIndex * (options.pageSize || 50);
        l = i + (options.pageSize || 50);
        l = (l <= resp.count) ? l : resp.count;
        resp.start = i + 1;
        resp.end = l;

        if(options.view==='list' || options.view==='thumbnail'){
            if(options.view==='list'){
                resp.columns = columns;
                for(i; i<l; i++){
                    resp.items.push(items[i]);
                }
            }else{
                for(i; i<l; i++){
                    resp.items.push({
                        color: colors[items[i].type.split(', ')[0]],
                        name: items[i].name,
                        src: items[i].ThumbnailImage
                    });
                }
            }

            setTimeout(function(){
                callback(resp);
            }, delays[Math.floor(Math.random() * 4)]);
        }
    };

    filtering = function(options){
        var items = $.extend([], pokemon);
        var search;

        if(options.filter.value!=='all'){
            items = _.filter(items, function(item){
                return (item.type.search(options.filter.value)>=0);
            });
        }
        if(options.search){
            search = options.search.toLowerCase();
            items = _.filter(items, function(item){
                return (
                    (item.name.toLowerCase().search(options.search)>=0) ||
                    (item.id.toLowerCase().search(options.search)>=0) ||
                    (item.type.toLowerCase().search(options.search)>=0) ||
                    (item.height.toLowerCase().search(options.search)>=0) ||
                    (item.weight.toLowerCase().search(options.search)>=0) ||
                    (item.abilities.toLowerCase().search(options.search)>=0) ||
                    (item.weakness.toLowerCase().search(options.search)>=0)
                );
            });
        }
        if(options.sortProperty){
            items = _.sortBy(items, function(item){
                if(options.sortProperty==='id' || options.sortProperty==='height' || options.sortProperty==='weight'){
                    return parseFloat(item[options.sortProperty]);
                }else{
                    return item[options.sortProperty];
                }
            });
            if(options.sortDirection==='desc'){
                items.reverse();
            }
        }

        return items;
    };

    // REPEATER
    $('#repeaterIllustration').repeater({
        dataSource: dataSource
    });

    $('#myRepeater').repeater({
        dataSource: dataSource
    });

    $('#myRepeaterList').repeater({
        dataSource: dataSource
    });

    $('#myRepeaterThumbnail').repeater({
        dataSource: dataSource,
        thumbnail_template: '<div class="thumbnail repeater-thumbnail" style="background: {{color}};"><img height="75" src="{{src}}" width="65"><span>{{name}}</span></div>'
    });

}

Answer 1

You seem to be doing everything right.. Only thing you had to do was load jQuery on onLoad and comment out define function(require) statement..

JSFiddle