Testing Backbone Collection Sorting

by bryandowning

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.0.1-bundled/backbone.marionette.min.js"></script>
<div id="colorList"></div>

<script type="text/template" id="tmpl-color">
    
    <p>NAME: <%= name %> --- HSL: <%= hsl %></p>
    
</script>

CoffeeScript

# Named CSS Colors
# This is just bootstrapped data
# Scroll all the way down to get to the real code
namedColors = [
  name: "AliceBlue"
  hex: "#f0f8ff"
  rgb: [ 240, 248, 255 ]
  hsl: [ 208, 6, 100 ]
,
  name: "AntiqueWhite"
  hex: "#faebd7"
  rgb: [ 250, 235, 215 ]
  hsl: [ 34, 14, 98 ]
,
  name: "Aqua"
  hex: "#00ffff"
  rgb: [ 0, 255, 255 ]
  hsl: [ 180, 100, 100 ]
,
  name: "Aquamarine"
  hex: "#7fffd4"
  rgb: [ 127, 255, 212 ]
  hsl: [ 160, 50, 100 ]
,
  name: "Azure"
  hex: "#f0ffff"
  rgb: [ 240, 255, 255 ]
  hsl: [ 180, 6, 100 ]
,
  name: "Beige"
  hex: "#f5f5dc"
  rgb: [ 245, 245, 220 ]
  hsl: [ 60, 10, 96 ]
,
  name: "Bisque"
  hex: "#ffe4c4"
  rgb: [ 255, 228, 196 ]
  hsl: [ 33, 23, 100 ]
,
  name: "Black"
  hex: "#000000"
  rgb: [ 0, 0, 0 ]
  hsl: [ 0, 0, 0 ]
,
  name: "BlanchedAlmond"
  hex: "#ffebcd"
  rgb: [ 255, 235, 205 ]
  hsl: [ 36, 20, 100 ]
,
  name: "Blue"
  hex: "#0000ff"
  rgb: [ 0, 0, 255 ]
  hsl: [ 240, 100, 100 ]
,
  name: "BlueViolet"
  hex: "#8a2be2"
  rgb: [ 138, 43, 226 ]
  hsl: [ 271, 81, 89 ]
,
  name: "Brown"
  hex: "#a52a2a"
  rgb: [ 165, 42, 42 ]
  hsl: [ 0, 75, 65 ]
,
  name: "BurlyWood"
  hex: "#deb887"
  rgb: [ 222, 184, 135 ]
  hsl: [ 34, 39, 87 ]
,
  name: "CadetBlue"
  hex: "#5f9ea0"
  rgb: [ 95, 158, 160 ]
  hsl: [ 182, 41, 63 ]
,
  name: "Chartreuse"
  hex: "#7fff00"
  rgb: [ 127, 255, 0 ]
  hsl: [ 90, 100, 100 ]
,
  name: "Chocolate"
  hex: "#d2691e"
  rgb: [ 210, 105, 30 ]
  hsl: [ 25, 86, 82 ]
,
  name: "Coral"
  hex: "#ff7f50"
  rgb: [ 255, 127, 80 ]
  hsl: [ 16, 69, 100 ]
,
  name: "CornflowerBlue"
  hex: "#6495ed"
  rgb: [ 100, 149, 237 ]
  hsl: [ 219, 58, 93 ]
,
  name: "Cornsilk"
  hex: "#fff8dc"
  rgb: [ 255, 248, 220 ]
  hsl: [ 48, 14, 100 ]
,
  name: "Crimson"
  hex: "#dc143c"
  rgb: [ 220, 20, 60 ]
  hsl: [ 348, 91, 86 ]
,
  name: "Cyan"
  hex: "#00ffff"
  rgb: [ 0, 255, 255 ]
  hsl: [ 180, 100, 100 ]
,
  name: "DarkBlue"
  hex: "#00008b"
  rgb: [ 0, 0, 139 ]
  hsl: [ 240, 100, 55 ]
,
  name: "DarkCyan"
 ...