removed backbone from VS solution,

renamed NzbDrone.Backbone to UI

UI/Missing/MissingCollection.js

@@ -0,0 +1,10 @@
+"use strict";
+define(['app', 'Missing/MissingModel'], function () {
+    NzbDrone.Missing.MissingCollection = Backbone.Collection.extend({
+        url       : NzbDrone.Constants.ApiRoot + '/missing',
+        model     : NzbDrone.Missing.MissingModel,
+        comparator: function (model) {
+            return model.get('airDate');
+        }
+    });
+});

UI/Missing/MissingCollectionTemplate.html

@@ -0,0 +1,37 @@
+<table class="table table-hover x-missing-table">
+    <thead>
+    <tr>
+        <th>Series Title</th>
+        <th>Episode</th>
+        <th>Episode Title</th>
+        <th>Air Date</th>
+        <th></th>
+    </tr>
+    </thead>
+    <tbody></tbody>
+</table>
+<div class="x-missing-table-pager">
+    <div class="row">
+        <div class="pagination span8">
+            <ul>
+                <li class="first">
+                    <a href="#"><i class="icon-fast-backward"></i></a>
+                </li>
+                <li class="prev">
+                    <a href="#"><i class="icon-backward"></i></a></li>
+                <li>
+                    <span class="page-number">0</span>
+                </li>
+                <li class="next">
+                    <a href="#"><i class="icon-forward"></i></a>
+                </li>
+                <li class="last">
+                    <a href="#"><i class="icon-fast-forward"></i></a>
+                </li>
+            </ul>
+        </div>
+        <div class="pull-right pagedisplay-container">
+            <span class="pagedisplay"></span>
+        </div>
+    </div>
+</div>

UI/Missing/MissingCollectionView.js

@@ -0,0 +1,91 @@
+'use strict';
+
+define(['app', 'Missing/MissingItemView'], function (app) {
+    NzbDrone.Missing.MissingCollectionView = Backbone.Marionette.CompositeView.extend({
+        itemView         : NzbDrone.Missing.MissingItemView,
+        itemViewContainer: 'tbody',
+        template         : 'Missing/MissingCollectionTemplate',
+
+        ui: {
+            table: '.x-missing-table',
+            pager: '.x-missing-table-pager'
+        },
+
+        initialize                   : function (context, action, query, collection) {
+            this.collection = collection;
+        },
+        onCompositeCollectionRendered: function () {
+            this.ui.table.trigger('update');
+
+            if (!this.tableSorter && this.collection.length > 0) {
+                this.tableSorter = this.ui.table.tablesorter({
+                    textExtraction: function (node) {
+                        return node.innerHTML;
+                    },
+                    sortList      : [
+                        [3, 1]
+                    ],
+                    headers       : {
+                        0: {
+                            sorter: 'innerHtml'
+                        },
+                        1: {
+                            sorter: false
+                        },
+                        2: {
+                            sorter: false
+                        },
+                        3: {
+                            sorter: 'date'
+                        },
+                        4: {
+                            sorter: false
+                        }
+                    }
+                });
+
+                this.ui.table.bind('pagerComplete pagerInitialized', function (event, c) {
+                    c.container.find('.page-number').text(c.page + 1);
+                });
+
+                this.ui.table.tablesorterPager({
+                    container: this.ui.pager,
+                    output   : 'Displaying {startRow} to {endRow} of {totalRows} episodes'
+                });
+
+                this.applySortIcons();
+
+                this.ui.table.bind("sortEnd", function () {
+                    this.applySortIcons();
+                });
+            }
+            else {
+                this.ui.table.trigger('update');
+            }
+        },
+
+        //Todo: Remove this from each view that requires it
+        applySortIcons               : function () {
+            $(this.ui.table).find('th.tablesorter-header .tablesorter-header-inner i').each(function () {
+                $(this).remove();
+            });
+
+            $(this.ui.table).find('th.tablesorter-header').each(function () {
+                if ($(this).hasClass('tablesorter-headerDesc')) {
+                    $(this).children('.tablesorter-header-inner').append('<i class="icon-sort-up pull-right">');
+                }
+
+                else if ($(this).hasClass('tablesorter-headerAsc')) {
+                    $(this).children('.tablesorter-header-inner').append('<i class="icon-sort-down pull-right">');
+                }
+
+                else if (!$(this).hasClass('sorter-false')) {
+                    $(this).children('.tablesorter-header-inner').append('<i class="icon-sort pull-right">');
+                }
+            });
+        },
+        updatePageNumber             : function (event, stuff) {
+
+        }
+    });
+});

UI/Missing/MissingItemTemplate.html

@@ -0,0 +1,5 @@
+<td><a href="/series/details/{{seriesId}}">{{seriesTitle}}</a></td>
+<td>{{seasonNumber}}x{{paddedEpisodeNumber}}</td>
+<td name="episodeTitle"></td>
+<td><span title="{{formatedDateString}}" data-date="{{airDate}}">{{bestDateString}}</span></td>
+<td><i class="icon-search x-search" title="Search for Episode"></i></td>

UI/Missing/MissingItemView.js

@@ -0,0 +1,16 @@
+'use strict';
+
+define([
+        'app',
+        'Missing/MissingCollection'
+
+], function () {
+    NzbDrone.Missing.MissingItemView = Backbone.Marionette.ItemView.extend({
+        template: 'Missing/MissingItemTemplate',
+        tagName: 'tr',
+
+        onRender: function () {
+            NzbDrone.ModelBinder.bind(this.model, this.el);
+        }
+    })
+})

UI/Missing/MissingModel.js

@@ -0,0 +1,12 @@
+define(['app'], function (app) {
+    NzbDrone.Missing.MissingModel = Backbone.Model.extend({
+        mutators: {
+            bestDateString: function () {
+                return bestDateString(this.get('airDate'));
+            },
+            paddedEpisodeNumber: function(){
+                return this.get('episodeNumber');
+            }
+        }
+    });
+});