Backbone.Table — Using getFormatted

Here, we play around with getFormatted.

by jsvine

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.1/backbone-min.js"></script>
<script src="https://raw.github.com/jsvine/Backbone.Table/master/backbone.table.js"></script>
<script src="https://raw.github.com/gist/2502565/5cab496ab58f3297d45850b0fec53170ffc30eb5/vertebrates.js"></script>
<div id="main"></div>

CSS

table { margin: 10px; font-family: Georgia, serif }

thead, tfoot { background: #D8E2EB; }

/* Take advantage of the auto-assigned .even and .odd classes */
tr.even { background: #F2F4F5; }

th { font-weight: bold; }

th, td { padding: 5px 10px; }

th+th, td+td { border-left: 1px solid #FFF; }

/* Take advantage of being able to assign classNames to columns */
td.vertebrate-class { font-style: italic; }
td.vertebrate-class a, td.vertebrate-class a:visited { color: #333; }
td.vertebrate-image img { height: 100px; margin: 0px auto; }

JavaScript

/* 
* NOTE: For the sake of brevity, we're creating the `vertebrates` 
* collection in an external script, included via the final <script> 
* tag above.
*/

/* 
* Create columns array where columns take advantage
* of the getFormatted() method.
*/
var vertebrate_columns = [
    {
        header: "Class",
        className: "vertebrate-class",
        getFormatted: function() {
            return "<a href='" + this.get("wiki_url") + "' target='_blank'>" + this.get("tax_class") + "</a>";
        }
    },{
        header: "Description",
        className: "vertebrate-description",
        getFormatted: function() {
            return this.get("description");
        }
    },{
        header: "Example Image",
        className: "vertebrate-image",
        getFormatted: function() {
            return "<img src='" + this.get("img") + "'/>";
        }
    }
];

var vertebrate_table = new Backbone.Table({
    collection: vertebrates,
    columns: vertebrate_columns
});

$("#main").append(vertebrate_table.render().el);