foreground.html

<script type="text/template" id="playlistItemTemplate">
    
    <div class="playlistItemVideoImage" style="background-image: url(http://img.youtube.com/vi/<%- video.get('id')%>/default.jpg)">

    </div>
    
    <div class="textWrapper">
        <span class="playlistItemTitle"><%- title %></span>
        <span class="playlistItemInfo"><!--Set inside render to utilize utility.js--></span>
    </div>

</script>

PlaylistItemView.js

define([
    'utility'
], function (Utility) {
    'use strict';

    var PlaylistItemView = Backbone.View.extend({
        tagName: 'li',
        
        className: 'playlistItem',
        
        template: _.template($('#playlistItemTemplate').html()),
        
        render: function() {
            this.$el.html(this.template(this.model.toJSON()));
            
            //  TODO: Probably renamed this to playlistitemid to avoid confusion with listitem's id.
            this.$el.attr('data-itemid', this.model.get('id'));

            var videoDuration = this.model.get('video').get('duration');
            var author = this.model.get('video').get('author');

            var playlistItemInfo = Utility.prettyPrintTime(videoDuration) + ' by ' + author;
            this.$el.find('span.playlistItemInfo').text(playlistItemInfo);

            Utility.scrollElementInsideParent(this.$el.find('span.playlitItemTitle'));

            return this;
        },
        
        initialize: function() {
            this.listenTo(this.model, 'destroy', this.remove);
        }

    });

    return PlaylistItemView;
});

Utility.js

//  Provides helper methods for non-specific functionality.
define({

    scrollElementInsideParent: function(element) {
        //  Scroll the element if its too long to read.
        $(element).mouseover(function () {
            var distanceToMove = $(this).width() - $(this).parent().width();

            $(this).animate({
                marginLeft: "-" + distanceToMove + "px"
            }, {
                //  Just a feel good value; scales as the text gets longer
                duration: 15 * distanceToMove,
                easing: 'linear'
            });

        }).mouseout(function () {
            $(this).stop(true).animate({ marginLeft: 0 });
        });
    },       

    //  Takes a time in seconds and converts it to a displayable format of H:mm:ss or mm:ss.
    prettyPrintTime: function(timeInSeconds) {
        if (isNaN(timeInSeconds)) {
            timeInSeconds = 0;
        }

        var hours = Math.floor(timeInSeconds / 3600);
        var remainingSeconds = timeInSeconds % 3600;

        var minutes = Math.floor(remainingSeconds / 60);
        remainingSeconds = remainingSeconds % 60;

        //  These lines ensure two-digits
        if (minutes < 10) {
            minutes = "0" + minutes;
        }

        if (remainingSeconds < 10) {
            remainingSeconds = "0" + remainingSeconds;
        }

        var timeString = minutes + ':' + remainingSeconds;

        if (hours > 0) {
            timeString = hours + ':' + timeString;
        }

        return timeString;
    }

});