Merge pull request #8416 from edx/andya/common-list-component

Create a common paginated list view

cms/djangoapps/contentstore/views/component.py

@@ -58,9 +58,9 @@ ADVANCED_COMPONENT_POLICY_KEY = 'advanced_modules'
 ADVANCED_PROBLEM_TYPES = settings.ADVANCED_PROBLEM_TYPES
 
 
-CONTAINER_TEMPATES = [
+CONTAINER_TEMPLATES = [
     "basic-modal", "modal-button", "edit-xblock-modal",
-    "editor-mode-button", "upload-dialog", "image-modal",
+    "editor-mode-button", "upload-dialog",
     "add-xblock-component", "add-xblock-component-button", "add-xblock-component-menu",
     "add-xblock-component-menu-problem", "xblock-string-field-editor", "publish-xblock", "publish-history",
     "unit-outline", "container-message", "license-selector",
@@ -217,7 +217,7 @@ def container_handler(request, usage_key_string):
                 'xblock_info': xblock_info,
                 'draft_preview_link': preview_lms_link,
                 'published_preview_link': lms_link,
-                'templates': CONTAINER_TEMPATES
+                'templates': CONTAINER_TEMPLATES
             })
     else:
         return HttpResponseBadRequest("Only supports HTML requests")

cms/djangoapps/contentstore/views/library.py

@@ -26,7 +26,7 @@ from xmodule.modulestore import ModuleStoreEnum
 from xmodule.modulestore.django import modulestore
 from .user import user_with_role
 
-from .component import get_component_templates, CONTAINER_TEMPATES
+from .component import get_component_templates, CONTAINER_TEMPLATES
 from student.auth import (
     STUDIO_VIEW_USERS, STUDIO_EDIT_ROLES, get_user_permissions, has_studio_read_access, has_studio_write_access
 )
@@ -197,7 +197,7 @@ def library_blocks_view(library, user, response_format):
         'context_library': library,
         'component_templates': json.dumps(component_templates),
         'xblock_info': xblock_info,
-        'templates': CONTAINER_TEMPATES,
+        'templates': CONTAINER_TEMPLATES,
     })
 
 

cms/envs/common.py

@@ -210,6 +210,7 @@ MAKO_TEMPLATES['main'] = [
     COMMON_ROOT / 'templates',
     COMMON_ROOT / 'djangoapps' / 'pipeline_mako' / 'templates',
     COMMON_ROOT / 'djangoapps' / 'pipeline_js' / 'templates',
+    COMMON_ROOT / 'static',  # required to statically include common Underscore templates
 ]
 
 for namespace, template_dirs in lms.envs.common.MAKO_TEMPLATES.iteritems():

cms/envs/devstack.py

@@ -30,6 +30,11 @@ EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
 LMS_BASE = "localhost:8000"
 FEATURES['PREVIEW_LMS_BASE'] = "preview." + LMS_BASE
 
+########################### PIPELINE #################################
+
+# Skip RequireJS optimizer in development
+STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'
+
 ############################# ADVANCED COMPONENTS #############################
 
 # Make it easier to test advanced components in local dev
@@ -92,6 +97,11 @@ FEATURES['ENABLE_COURSEWARE_INDEX'] = True
 FEATURES['ENABLE_LIBRARY_INDEX'] = True
 SEARCH_ENGINE = "search.elastic.ElasticSearchEngine"
 
+################################# DJANGO-REQUIRE ###############################
+
+# Whether to run django-require in debug mode.
+REQUIRE_DEBUG = DEBUG
+
 ###############################################################################
 # See if the developer has any local overrides.
 try:

cms/static/build.js

@@ -118,7 +118,7 @@
          * As of 1.0.3, this value can also be a string that is converted to a
          * RegExp via new RegExp().
          */
-        fileExclusionRegExp: /^\.|spec/,
+        fileExclusionRegExp: /^\.|spec|spec_helpers/,
         /**
          * Allow CSS optimizations. Allowed values:
          * - "standard": @import inlining and removal of comments, unnecessary
@@ -153,6 +153,6 @@
          * SILENT: 4
          * Default is 0.
          */
-        logLevel: 4
+        logLevel: 1
     };
 } ())

cms/static/coffee/spec/main.coffee

@@ -23,6 +23,7 @@ requirejs.config({
         "jquery.simulate": "xmodule_js/common_static/js/vendor/jquery.simulate",
         "datepair": "xmodule_js/common_static/js/vendor/timepicker/datepair",
         "date": "xmodule_js/common_static/js/vendor/date",
+        "text": "xmodule_js/common_static/js/vendor/requirejs/text",
         "underscore": "xmodule_js/common_static/js/vendor/underscore-min",
         "underscore.string": "xmodule_js/common_static/js/vendor/underscore.string.min",
         "backbone": "xmodule_js/common_static/js/vendor/backbone-min",
@@ -240,13 +241,11 @@ define([
     "js/spec/views/active_video_upload_list_spec",
     "js/spec/views/previous_video_upload_spec",
     "js/spec/views/previous_video_upload_list_spec",
-    "js/spec/views/paging_spec",
     "js/spec/views/assets_spec",
     "js/spec/views/baseview_spec",
     "js/spec/views/container_spec",
     "js/spec/views/paged_container_spec",
     "js/spec/views/group_configuration_spec",
-    "js/spec/views/paging_spec",
     "js/spec/views/unit_outline_spec",
     "js/spec/views/xblock_spec",
     "js/spec/views/xblock_editor_spec",

cms/static/coffee/spec/main_spec.coffee

-require ["jquery", "backbone", "coffee/src/main", "js/common_helpers/ajax_helpers", "jasmine-stealth", "jquery.cookie"],
+require ["jquery", "backbone", "coffee/src/main", "common/js/spec_helpers/ajax_helpers", "jasmine-stealth", "jquery.cookie"],
 ($, Backbone, main, AjaxHelpers) ->
     describe "CMS", ->
         it "should initialize URL", ->

cms/static/coffee/spec/main_squire.coffee

@@ -21,6 +21,7 @@ requirejs.config({
         "jquery.immediateDescendents": "xmodule_js/common_static/coffee/src/jquery.immediateDescendents",
         "datepair": "xmodule_js/common_static/js/vendor/timepicker/datepair",
         "date": "xmodule_js/common_static/js/vendor/date",
+        "text": "xmodule_js/common_static/js/vendor/requirejs/text",
         "underscore": "xmodule_js/common_static/js/vendor/underscore-min",
         "underscore.string": "xmodule_js/common_static/js/vendor/underscore.string.min",
         "backbone": "xmodule_js/common_static/js/vendor/backbone-min",

cms/static/coffee/spec/models/section_spec.coffee

-define ["js/models/section", "js/common_helpers/ajax_helpers", "js/utils/module"], (Section, AjaxHelpers, ModuleUtils) ->
+define ["js/models/section", "common/js/spec_helpers/ajax_helpers", "js/utils/module"], (Section, AjaxHelpers, ModuleUtils) ->
     describe "Section", ->
         describe "basic", ->
             beforeEach ->

cms/static/coffee/spec/views/assets_spec.coffee

-define ["jquery", "jasmine", "js/common_helpers/ajax_helpers", "squire"],
+define ["jquery", "jasmine", "common/js/spec_helpers/ajax_helpers", "squire"],
 ($, jasmine, AjaxHelpers, Squire) ->
 
     feedbackTpl = readFixtures('system-feedback.underscore')
     assetLibraryTpl = readFixtures('asset-library.underscore')
     assetTpl = readFixtures('asset.underscore')
-    pagingHeaderTpl = readFixtures('paging-header.underscore')
-    pagingFooterTpl = readFixtures('paging-footer.underscore')
 
     describe "Asset view", ->
         beforeEach ->
@@ -141,8 +139,6 @@ define ["jquery", "jasmine", "js/common_helpers/ajax_helpers", "squire"],
         beforeEach ->
             setFixtures($("<script>", {id: "asset-library-tpl", type: "text/template"}).text(assetLibraryTpl))
             appendSetFixtures($("<script>", {id: "asset-tpl", type: "text/template"}).text(assetTpl))
-            appendSetFixtures($("<script>", {id: "paging-header-tpl", type: "text/template"}).text(pagingHeaderTpl))
-            appendSetFixtures($("<script>", {id: "paging-footer-tpl", type: "text/template"}).text(pagingFooterTpl))
             appendSetFixtures($("<script>", {id: "system-feedback-tpl", type: "text/template"}).text(feedbackTpl))
             window.analytics = jasmine.createSpyObj('analytics', ['track'])
             window.course_location_analytics = jasmine.createSpy()
@@ -241,7 +237,7 @@ define ["jquery", "jasmine", "js/common_helpers/ajax_helpers", "squire"],
         describe "Basic", ->
             # Separate setup method to work-around mis-parenting of beforeEach methods
             setup = (requests) ->
-                @view.setPage(0)
+                @view.pagingView.setPage(0)
                 AjaxHelpers.respondWithJson(requests, @mockAssetsResponse)
 
             $.fn.fileupload = ->
@@ -285,7 +281,7 @@ define ["jquery", "jasmine", "js/common_helpers/ajax_helpers", "squire"],
                 {view: @view, requests: requests} = @createAssetsView(this)
                 appendSetFixtures('<div class="ui-loading"/>')
                 expect($('.ui-loading').is(':visible')).toBe(true)
-                @view.setPage(0)
+                @view.pagingView.setPage(0)
                 AjaxHelpers.respondWithError(requests)
                 expect($('.ui-loading').is(':visible')).toBe(false)
 
@@ -333,27 +329,27 @@ define ["jquery", "jasmine", "js/common_helpers/ajax_helpers", "squire"],
         describe "Sorting", ->
             # Separate setup method to work-around mis-parenting of beforeEach methods
             setup = (requests) ->
-                @view.setPage(0)
+                @view.pagingView.setPage(0)
                 AjaxHelpers.respondWithJson(requests, @mockAssetsResponse)
 
             it "should have the correct default sort order", ->
                 {view: @view, requests: requests} = @createAssetsView(this)
                 setup.call(this, requests)
-                expect(@view.sortDisplayName()).toBe("Date Added")
+                expect(@view.pagingView.sortDisplayName()).toBe("Date Added")
                 expect(@view.collection.sortDirection).toBe("desc")
 
             it "should toggle the sort order when clicking on the currently sorted column", ->
                 {view: @view, requests: requests} = @createAssetsView(this)
                 setup.call(this, requests)
-                expect(@view.sortDisplayName()).toBe("Date Added")
+                expect(@view.pagingView.sortDisplayName()).toBe("Date Added")
                 expect(@view.collection.sortDirection).toBe("desc")
                 @view.$("#js-asset-date-col").click()
                 AjaxHelpers.respondWithJson(requests, @mockAssetsResponse)
-                expect(@view.sortDisplayName()).toBe("Date Added")
+                expect(@view.pagingView.sortDisplayName()).toBe("Date Added")
                 expect(@view.collection.sortDirection).toBe("asc")
                 @view.$("#js-asset-date-col").click()
                 AjaxHelpers.respondWithJson(requests, @mockAssetsResponse)
-                expect(@view.sortDisplayName()).toBe("Date Added")
+                expect(@view.pagingView.sortDisplayName()).toBe("Date Added")
                 expect(@view.collection.sortDirection).toBe("desc")
 
             it "should switch the sort order when clicking on a different column", ->
@@ -361,11 +357,11 @@ define ["jquery", "jasmine", "js/common_helpers/ajax_helpers", "squire"],
                 setup.call(this, requests)
                 @view.$("#js-asset-name-col").click()
                 AjaxHelpers.respondWithJson(requests, @mockAssetsResponse)
-                expect(@view.sortDisplayName()).toBe("Name")
+                expect(@view.pagingView.sortDisplayName()).toBe("Name")
                 expect(@view.collection.sortDirection).toBe("asc")
                 @view.$("#js-asset-name-col").click()
                 AjaxHelpers.respondWithJson(requests, @mockAssetsResponse)
-                expect(@view.sortDisplayName()).toBe("Name")
+                expect(@view.pagingView.sortDisplayName()).toBe("Name")
                 expect(@view.collection.sortDirection).toBe("desc")
 
             it "should switch sort to most recent date added when a new asset is added", ->
@@ -375,5 +371,5 @@ define ["jquery", "jasmine", "js/common_helpers/ajax_helpers", "squire"],
                 AjaxHelpers.respondWithJson(requests, @mockAssetsResponse)
                 addMockAsset.call(this, requests)
                 AjaxHelpers.respondWithJson(requests, @mockAssetsResponse)
-                expect(@view.sortDisplayName()).toBe("Date Added")
+                expect(@view.pagingView.sortDisplayName()).toBe("Date Added")
                 expect(@view.collection.sortDirection).toBe("desc")

cms/static/coffee/spec/views/course_info_spec.coffee

-define ["js/views/course_info_handout", "js/views/course_info_update", "js/models/module_info", "js/collections/course_update", "js/common_helpers/ajax_helpers"],
+define ["js/views/course_info_handout", "js/views/course_info_update", "js/models/module_info", "js/collections/course_update", "common/js/spec_helpers/ajax_helpers"],
 (CourseInfoHandoutsView, CourseInfoUpdateView, ModuleInfo, CourseUpdateCollection, AjaxHelpers) ->
 
     describe "Course Updates and Handouts", ->

cms/static/coffee/spec/views/textbook_spec.coffee

 define ["js/models/textbook", "js/models/chapter", "js/collections/chapter", "js/models/course",
     "js/collections/textbook", "js/views/show_textbook", "js/views/edit_textbook", "js/views/list_textbooks",
     "js/views/edit_chapter", "js/views/feedback_prompt", "js/views/feedback_notification", "js/views/utils/view_utils",
-    "js/common_helpers/ajax_helpers", "js/spec_helpers/modal_helpers", "jasmine-stealth"],
+    "common/js/spec_helpers/ajax_helpers", "js/spec_helpers/modal_helpers", "jasmine-stealth"],
 (Textbook, Chapter, ChapterSet, Course, TextbookSet, ShowTextbook, EditTextbook, ListTextbooks, EditChapter, Prompt, Notification, ViewUtils, AjaxHelpers, modal_helpers) ->
     feedbackTpl = readFixtures('system-feedback.underscore')
 

cms/static/coffee/spec/views/upload_spec.coffee

-define ["js/models/uploads", "js/views/uploads", "js/models/chapter", "js/common_helpers/ajax_helpers", "js/spec_helpers/modal_helpers"], (FileUpload, UploadDialog, Chapter, AjaxHelpers, modal_helpers) ->
+define ["js/models/uploads", "js/views/uploads", "js/models/chapter", "common/js/spec_helpers/ajax_helpers", "js/spec_helpers/modal_helpers"], (FileUpload, UploadDialog, Chapter, AjaxHelpers, modal_helpers) ->
 
     feedbackTpl = readFixtures('system-feedback.underscore')
 

cms/static/common

+../../common/static/common
\ No newline at end of file

cms/static/js/certificates/spec/views/certificate_details_spec.js

@@ -8,8 +8,8 @@ define([ // jshint ignore:line
     'js/certificates/views/certificate_details',
     'js/certificates/views/certificate_preview',
     'js/views/feedback_notification',
-    'js/common_helpers/ajax_helpers',
-    'js/common_helpers/template_helpers',
+    'common/js/spec_helpers/ajax_helpers',
+    'common/js/spec_helpers/template_helpers',
     'js/spec_helpers/view_helpers',
     'js/spec_helpers/validation_helpers',
     'js/certificates/spec/custom_matchers'

cms/static/js/certificates/spec/views/certificate_editor_spec.js

@@ -8,8 +8,8 @@ define([ // jshint ignore:line
     'js/certificates/collections/certificates',
     'js/certificates/views/certificate_editor',
     'js/views/feedback_notification',
-    'js/common_helpers/ajax_helpers',
-    'js/common_helpers/template_helpers',
+    'common/js/spec_helpers/ajax_helpers',
+    'common/js/spec_helpers/template_helpers',
     'js/spec_helpers/view_helpers',
     'js/spec_helpers/validation_helpers',
     'js/certificates/spec/custom_matchers'

cms/static/js/certificates/spec/views/certificates_list_spec.js

@@ -11,8 +11,8 @@ define([ // jshint ignore:line
     'js/certificates/views/certificates_list',
     'js/certificates/views/certificate_preview',
     'js/views/feedback_notification',
-    'js/common_helpers/ajax_helpers',
-    'js/common_helpers/template_helpers',
+    'common/js/spec_helpers/ajax_helpers',
+    'common/js/spec_helpers/template_helpers',
     'js/certificates/spec/custom_matchers'
 ],
 function(_, Course, CertificatesCollection, CertificateModel, CertificateDetailsView, CertificateEditorView,

cms/static/js/certificates/views/certificates_page.js

@@ -4,11 +4,10 @@ define([ // jshint ignore:line
     'jquery',
     'underscore',
     'gettext',
-    'js/common_helpers/page_helpers',
     'js/views/pages/base_page',
     'js/certificates/views/certificates_list'
 ],
-function ($, _, gettext, PageHelpers, BasePage, CertificatesListView) {
+function ($, _, gettext, BasePage, CertificatesListView) {
     'use strict';
     var CertificatesPage = BasePage.extend({
 

cms/static/js/common_helpers

-../../../common/static/js/spec_helpers
\ No newline at end of file

cms/static/js/factories/common_deps.js

-define(['domReady!', 'jquery', 'backbone', 'underscore', 'gettext']);
+define(['domReady!', 'jquery', 'backbone', 'underscore', 'gettext', 'text']);

cms/static/js/spec/factories/xblock_validation_spec.js

-define(['jquery', 'js/factories/xblock_validation', 'js/common_helpers/template_helpers'],
+define(['jquery', 'js/factories/xblock_validation', 'common/js/spec_helpers/template_helpers'],
     function($, XBlockValidationFactory, TemplateHelpers) {
 
         describe('XBlockValidationFactory', function() {

cms/static/js/spec/utils/drag_and_drop_spec.js

-define(["js/utils/drag_and_drop", "js/views/feedback_notification", "js/common_helpers/ajax_helpers", "jquery", "underscore"],
+define(["js/utils/drag_and_drop", "js/views/feedback_notification", "common/js/spec_helpers/ajax_helpers", "jquery", "underscore"],
     function (ContentDragger, Notification, AjaxHelpers, $, _) {
         describe("Overview drag and drop functionality", function () {
             beforeEach(function () {

cms/static/js/spec/video/file_uploader_editor_spec.js

 define(
     [
-        'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'squire'
+        'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'squire'
     ],
 function ($, _, AjaxHelpers, Squire) {
     'use strict';

cms/static/js/spec/video/translations_editor_spec.js

 define(
     [
-        'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'squire'
+        'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'squire'
     ],
 function ($, _, AjaxHelpers, Squire) {
     'use strict';

cms/static/js/spec/views/active_video_upload_list_spec.js

 define(
-    ["jquery", "js/models/active_video_upload", "js/views/active_video_upload_list", "js/common_helpers/template_helpers", "mock-ajax", "jasmine-jquery"],
+    ["jquery", "js/models/active_video_upload", "js/views/active_video_upload_list", "common/js/spec_helpers/template_helpers", "mock-ajax", "jasmine-jquery"],
     function($, ActiveVideoUpload, ActiveVideoUploadListView, TemplateHelpers) {
         "use strict";
         var concurrentUploadLimit = 2;

cms/static/js/spec/views/assets_spec.js

-define([ "jquery", "js/common_helpers/ajax_helpers", "URI", "js/views/asset", "js/views/assets",
+define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/asset", "js/views/assets",
     "js/models/asset", "js/collections/asset", "js/spec_helpers/view_helpers"],
     function ($, AjaxHelpers, URI, AssetView, AssetsView, AssetModel, AssetCollection, ViewHelpers) {
 
@@ -8,15 +8,11 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI", "js/views/asset", "j
 
             assetLibraryTpl = readFixtures('asset-library.underscore');
             assetTpl = readFixtures('asset.underscore');
-            pagingHeaderTpl = readFixtures('paging-header.underscore');
-            pagingFooterTpl = readFixtures('paging-footer.underscore');
             uploadModalTpl = readFixtures('asset-upload-modal.underscore');
 
             beforeEach(function () {
                 setFixtures($("<script>", { id: "asset-library-tpl", type: "text/template" }).text(assetLibraryTpl));
                 appendSetFixtures($("<script>", { id: "asset-tpl", type: "text/template" }).text(assetTpl));
-                appendSetFixtures($("<script>", { id: "paging-header-tpl", type: "text/template" }).text(pagingHeaderTpl));
-                appendSetFixtures($("<script>", { id: "paging-footer-tpl", type: "text/template" }).text(pagingFooterTpl));
                 appendSetFixtures(uploadModalTpl);
                 appendSetFixtures(sandbox({ id: "asset_table_body" }));
 
@@ -139,7 +135,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI", "js/views/asset", "j
                 var setup;
                 setup = function(responseData) {
                     var requests = AjaxHelpers.requests(this);
-                    assetsView.setPage(0);
+                    assetsView.pagingView.setPage(0);
                     if (!responseData){
                         AjaxHelpers.respondWithJson(requests, mockEmptyAssetsResponse);
                     }
@@ -188,8 +184,8 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI", "js/views/asset", "j
                     expect(assetsView).toBeDefined();
                     spyOn(assetsView, "addAsset").andCallFake(function () {
                         assetsView.collection.add(mockAssetUploadResponse.asset);
-                        assetsView.renderPageItems();
-                        assetsView.setPage(0);
+                        assetsView.pagingView.renderPageItems();
+                        assetsView.pagingView.setPage(0);
                     });
 
                     $('a:contains("Upload your first asset")').click();
@@ -248,9 +244,9 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI", "js/views/asset", "j
                 });
 
                 it('returns the registered info for a filter column', function () {
-                    assetsView.registerSortableColumn('test-col', 'Test Column', 'testField', 'asc');
-                    assetsView.registerFilterableColumn('js-asset-type-col', 'Type', 'asset_type');
-                    var filterInfo = assetsView.filterableColumnInfo('js-asset-type-col');
+                    assetsView.pagingView.registerSortableColumn('test-col', 'Test Column', 'testField', 'asc');
+                    assetsView.pagingView.registerFilterableColumn('js-asset-type-col', 'Type', 'asset_type');
+                    var filterInfo = assetsView.pagingView.filterableColumnInfo('js-asset-type-col');
                     expect(filterInfo.displayName).toBe('Type');
                     expect(filterInfo.fieldName).toBe('asset_type');
                 });
@@ -265,16 +261,16 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI", "js/views/asset", "j
                 it('make sure selectFilter sets collection filter if undefined', function () {
                     expect(assetsView).toBeDefined();
                     assetsView.collection.filterField = '';
-                    assetsView.selectFilter('js-asset-type-col');
+                    assetsView.pagingView.selectFilter('js-asset-type-col');
                     expect(assetsView.collection.filterField).toEqual('asset_type');
                 });
 
                 it('make sure _toggleFilterColumn filters asset list', function () {
                     expect(assetsView).toBeDefined();
                     var requests = AjaxHelpers.requests(this);
-                    $.each(assetsView.filterableColumns, function(columnID, columnData){
+                    $.each(assetsView.pagingView.filterableColumns, function(columnID, columnData){
                         var $typeColumn = $('#' + columnID);
-                        assetsView.setPage(0);
+                        assetsView.pagingView.setPage(0);
                         respondWithMockAssets(requests);
                         var assetsNumber = assetsView.collection.length;
                         assetsView._toggleFilterColumn('Images', 'Images');
@@ -288,7 +284,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI", "js/views/asset", "j
                 it('opens and closes select type menu', function () {
                     expect(assetsView).toBeDefined();
                     setup.call(this, mockExampleAssetsResponse);
-                    $.each(assetsView.filterableColumns, function(columnID, columnData){
+                    $.each(assetsView.pagingView.filterableColumns, function(columnID, columnData){
                         var $typeColumn = $('#' + columnID);
                         expect($typeColumn).toBeVisible();
                         var assetsNumber = $('#asset-table-body .type-col').length;
@@ -304,12 +300,12 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI", "js/views/asset", "j
                 it('check filtering works with sorting by column on', function () {
                     expect(assetsView).toBeDefined();
                     var requests = AjaxHelpers.requests(this);
-                    assetsView.registerSortableColumn('name-col', 'Name Column', 'nameField', 'asc');
-                    assetsView.registerFilterableColumn('js-asset-type-col', gettext('Type'), 'asset_type');
-                    assetsView.setInitialSortColumn('name-col');
-                    assetsView.setPage(0);
+                    assetsView.pagingView.registerSortableColumn('name-col', 'Name Column', 'nameField', 'asc');
+                    assetsView.pagingView.registerFilterableColumn('js-asset-type-col', gettext('Type'), 'asset_type');
+                    assetsView.pagingView.setInitialSortColumn('name-col');
+                    assetsView.pagingView.setPage(0);
                     respondWithMockAssets(requests);
-                    var sortInfo = assetsView.sortableColumnInfo('name-col');
+                    var sortInfo = assetsView.pagingView.sortableColumnInfo('name-col');
                     expect(sortInfo.defaultSortDirection).toBe('asc');
                     var $firstFilter = $($('#js-asset-type-col').find('li.nav-item a')[1]);
                     $firstFilter.trigger('click');
@@ -322,8 +318,8 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI", "js/views/asset", "j
                 it('shows type select menu, selects type, and filters results', function () {
                     expect(assetsView).toBeDefined();
                     var requests = AjaxHelpers.requests(this);
-                    $.each(assetsView.filterableColumns, function(columnID, columnData) {
-                        assetsView.setPage(0);
+                    $.each(assetsView.pagingView.filterableColumns, function(columnID, columnData) {
+                        assetsView.pagingView.setPage(0);
                         respondWithMockAssets(requests);
                         var $typeColumn = $('#' + columnID);
                         expect($typeColumn).toBeVisible();

cms/static/js/spec/views/container_spec.js

-define([ "jquery", "js/common_helpers/ajax_helpers", "js/spec_helpers/edit_helpers",
+define([ "jquery", "common/js/spec_helpers/ajax_helpers", "js/spec_helpers/edit_helpers",
     "js/views/container", "js/models/xblock_info", "jquery.simulate",
     "xmodule", "coffee/src/main", "xblock/cms.runtime.v1"],
     function ($, AjaxHelpers, EditHelpers, ContainerView, XBlockInfo) {

cms/static/js/spec/views/group_configuration_spec.js

@@ -4,7 +4,7 @@ define([
     'js/views/group_configuration_details', 'js/views/group_configurations_list', 'js/views/group_configuration_editor',
     'js/views/group_configuration_item', 'js/views/experiment_group_edit', 'js/views/content_group_list',
     'js/views/content_group_details', 'js/views/content_group_editor', 'js/views/content_group_item',
-    'js/views/feedback_notification', 'js/common_helpers/ajax_helpers', 'js/common_helpers/template_helpers',
+    'js/views/feedback_notification', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
     'js/spec_helpers/view_helpers', 'jasmine-stealth'
 ], function(
     _, Course, GroupConfigurationModel, GroupModel, GroupConfigurationCollection, GroupCollection,

cms/static/js/spec/views/license_spec.js

-define(["js/views/license", "js/models/license", "js/common_helpers/template_helpers"],
+define(["js/views/license", "js/models/license", "common/js/spec_helpers/template_helpers"],
              function(LicenseView, LicenseModel, TemplateHelpers) {
     describe("License view", function() {
 

cms/static/js/spec/views/modals/edit_xblock_spec.js

-define(["jquery", "underscore", "js/common_helpers/ajax_helpers", "js/spec_helpers/edit_helpers",
+define(["jquery", "underscore", "common/js/spec_helpers/ajax_helpers", "js/spec_helpers/edit_helpers",
     "js/views/modals/edit_xblock", "js/models/xblock_info"],
     function ($, _, AjaxHelpers, EditHelpers, EditXBlockModal, XBlockInfo) {
 

cms/static/js/spec/views/paged_container_spec.js

-define([ "jquery", "underscore", "js/common_helpers/ajax_helpers", "URI", "js/models/xblock_info",
-    "js/views/paged_container", "js/views/paging_header", "js/views/paging_footer", "js/views/xblock"],
+define(["jquery", "underscore", "common/js/spec_helpers/ajax_helpers", "URI", "js/models/xblock_info",
+        "js/views/paged_container", "common/js/components/views/paging_header",
+        "common/js/components/views/paging_footer", "js/views/xblock"],
     function ($, _, AjaxHelpers, URI, XBlockInfo, PagedContainer, PagingHeader, PagingFooter, XBlockView) {
 
         var htmlResponseTpl = _.template('' +
@@ -175,11 +176,6 @@ define([ "jquery", "underscore", "js/common_helpers/ajax_helpers", "URI", "js/mo
             });
 
             describe("PagingHeader", function () {
-                beforeEach(function () {
-                    var pagingFooterTpl = readFixtures('paging-header.underscore');
-                    appendSetFixtures($("<script>", { id: "paging-header-tpl", type: "text/template" }).text(pagingFooterTpl));
-                });
-
                 describe("Next page button", function () {
                     beforeEach(function () {
                         pagingContainer.render();
@@ -331,11 +327,6 @@ define([ "jquery", "underscore", "js/common_helpers/ajax_helpers", "URI", "js/mo
             });
 
             describe("PagingFooter", function () {
-                beforeEach(function () {
-                    var pagingFooterTpl = readFixtures('paging-footer.underscore');
-                    appendSetFixtures($("<script>", { id: "paging-footer-tpl", type: "text/template" }).text(pagingFooterTpl));
-                });
-
                 describe("Next page button", function () {
                     beforeEach(function () {
                         // Render the page and header so that they can react to events

cms/static/js/spec/views/pages/container_spec.js

-define(["jquery", "underscore", "underscore.string", "js/common_helpers/ajax_helpers",
-        "js/common_helpers/template_helpers", "js/spec_helpers/edit_helpers",
+define(["jquery", "underscore", "underscore.string", "common/js/spec_helpers/ajax_helpers",
+        "common/js/spec_helpers/template_helpers", "js/spec_helpers/edit_helpers",
         "js/views/pages/container", "js/views/pages/paged_container", "js/models/xblock_info", "jquery.simulate"],
     function ($, _, str, AjaxHelpers, TemplateHelpers, EditHelpers, ContainerPage, PagedContainerPage, XBlockInfo) {
 

cms/static/js/spec/views/pages/container_subviews_spec.js

-define(["jquery", "underscore", "underscore.string", "js/common_helpers/ajax_helpers",
-        "js/common_helpers/template_helpers", "js/spec_helpers/edit_helpers",
+define(["jquery", "underscore", "underscore.string", "common/js/spec_helpers/ajax_helpers",
+        "common/js/spec_helpers/template_helpers", "js/spec_helpers/edit_helpers",
         "js/views/feedback_prompt", "js/views/pages/container", "js/views/pages/container_subviews",
         "js/models/xblock_info", "js/views/utils/xblock_utils"],
     function ($, _, str, AjaxHelpers, TemplateHelpers, EditHelpers, Prompt, ContainerPage, ContainerSubviews,

cms/static/js/spec/views/pages/course_outline_spec.js

-define(["jquery", "sinon", "js/common_helpers/ajax_helpers", "js/views/utils/view_utils", "js/views/pages/course_outline",
+define(["jquery", "sinon", "common/js/spec_helpers/ajax_helpers", "js/views/utils/view_utils", "js/views/pages/course_outline",
         "js/models/xblock_outline_info", "js/utils/date_utils", "js/spec_helpers/edit_helpers",
-        "js/common_helpers/template_helpers"],
+        "common/js/spec_helpers/template_helpers"],
     function($, Sinon, AjaxHelpers, ViewUtils, CourseOutlinePage, XBlockOutlineInfo, DateUtils, EditHelpers, TemplateHelpers) {
 
         describe("CourseOutlinePage", function() {

cms/static/js/spec/views/pages/course_rerun_spec.js

-define(["jquery", "js/common_helpers/ajax_helpers", "js/spec_helpers/view_helpers", "js/views/course_rerun",
+define(["jquery", "common/js/spec_helpers/ajax_helpers", "js/spec_helpers/view_helpers", "js/views/course_rerun",
         "js/views/utils/create_course_utils", "js/views/utils/view_utils", "jquery.simulate"],
     function ($, AjaxHelpers, ViewHelpers, CourseRerunUtils, CreateCourseUtilsFactory, ViewUtils) {
         describe("Create course rerun page", function () {

cms/static/js/spec/views/pages/group_configurations_spec.js

 define([
     'jquery', 'underscore', 'js/views/pages/group_configurations',
     'js/models/group_configuration', 'js/collections/group_configuration',
-    'js/common_helpers/template_helpers'
+    'common/js/spec_helpers/template_helpers'
 ], function ($, _, GroupConfigurationsPage, GroupConfigurationModel, GroupConfigurationCollection, TemplateHelpers) {
     'use strict';
     describe('GroupConfigurationsPage', function() {

cms/static/js/spec/views/pages/index_spec.js

-define(["jquery", "js/common_helpers/ajax_helpers", "js/spec_helpers/view_helpers", "js/index",
+define(["jquery", "common/js/spec_helpers/ajax_helpers", "js/spec_helpers/view_helpers", "js/index",
         "js/views/utils/view_utils"],
     function ($, AjaxHelpers, ViewHelpers, IndexUtils, ViewUtils) {
         describe("Course listing page", function () {

cms/static/js/spec/views/pages/library_users_spec.js

 define([
-    "jquery", "js/common_helpers/ajax_helpers", "js/spec_helpers/view_helpers",
+    "jquery", "common/js/spec_helpers/ajax_helpers", "js/spec_helpers/view_helpers",
     "js/factories/manage_users_lib", "js/views/utils/view_utils"
 ],
 function ($, AjaxHelpers, ViewHelpers, ManageUsersFactory, ViewUtils) {

cms/static/js/spec/views/previous_video_upload_list_spec.js

 define(
-    ["jquery", "underscore", "backbone", "js/views/previous_video_upload_list", "js/common_helpers/template_helpers"],
+    ["jquery", "underscore", "backbone", "js/views/previous_video_upload_list", "common/js/spec_helpers/template_helpers"],
     function($, _, Backbone, PreviousVideoUploadListView, TemplateHelpers) {
         "use strict";
         describe("PreviousVideoUploadListView", function() {

cms/static/js/spec/views/previous_video_upload_spec.js

 define(
-    ["jquery", "backbone", "js/views/previous_video_upload", "js/common_helpers/template_helpers"],
+    ["jquery", "backbone", "js/views/previous_video_upload", "common/js/spec_helpers/template_helpers"],
     function($, Backbone, PreviousVideoUploadView, TemplateHelpers) {
         "use strict";
         describe("PreviousVideoUploadView", function() {

cms/static/js/spec/views/settings/main_spec.js

 define([
     'jquery', 'js/models/settings/course_details', 'js/views/settings/main',
-    'js/common_helpers/ajax_helpers'
+    'common/js/spec_helpers/ajax_helpers'
 ], function($, CourseDetailsModel, MainView, AjaxHelpers) {
     'use strict';
 

cms/static/js/spec/views/unit_outline_spec.js

-define(["jquery", "js/common_helpers/ajax_helpers", "js/common_helpers/template_helpers",
+define(["jquery", "common/js/spec_helpers/ajax_helpers", "common/js/spec_helpers/template_helpers",
         "js/spec_helpers/view_helpers", "js/views/utils/view_utils", "js/views/unit_outline", "js/models/xblock_info"],
     function ($, AjaxHelpers, TemplateHelpers, ViewHelpers, ViewUtils, UnitOutlineView, XBlockInfo) {
 

cms/static/js/spec/views/xblock_editor_spec.js

-define([ "jquery", "underscore", "js/common_helpers/ajax_helpers", "js/spec_helpers/edit_helpers",
+define([ "jquery", "underscore", "common/js/spec_helpers/ajax_helpers", "js/spec_helpers/edit_helpers",
     "js/views/xblock_editor", "js/models/xblock_info"],
     function ($, _, AjaxHelpers, EditHelpers, XBlockEditorView, XBlockInfo) {
 

cms/static/js/spec/views/xblock_spec.js

-define([ "jquery", "js/common_helpers/ajax_helpers", "URI", "js/views/xblock", "js/models/xblock_info",
+define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI", "js/views/xblock", "js/models/xblock_info",
     "xmodule", "coffee/src/main", "xblock/cms.runtime.v1"],
     function ($, AjaxHelpers, URI, XBlockView, XBlockInfo) {
 

cms/static/js/spec/views/xblock_string_field_editor_spec.js

-define(["jquery", "js/common_helpers/ajax_helpers", "js/common_helpers/template_helpers",
+define(["jquery", "common/js/spec_helpers/ajax_helpers", "common/js/spec_helpers/template_helpers",
         "js/spec_helpers/edit_helpers", "js/models/xblock_info", "js/views/xblock_string_field_editor"],
        function ($, AjaxHelpers, TemplateHelpers, EditHelpers, XBlockInfo, XBlockStringFieldEditor) {
            describe("XBlockStringFieldEditorView", function () {

cms/static/js/spec/views/xblock_validation_spec.js

-define(['jquery', 'js/models/xblock_validation', 'js/views/xblock_validation', 'js/common_helpers/template_helpers'],
+define(['jquery', 'js/models/xblock_validation', 'js/views/xblock_validation', 'common/js/spec_helpers/template_helpers'],
     function($, XBlockValidationModel, XBlockValidationView, TemplateHelpers) {
 
         beforeEach(function () {

cms/static/js/spec_helpers/assertion_helpers.js

 /**
  * Provides helper methods for invoking Studio modal windows in Jasmine tests.
  */
-define(["jquery", "js/views/feedback_notification", "js/views/feedback_prompt", "js/common_helpers/template_helpers"],
+define(["jquery", "js/views/feedback_notification", "js/views/feedback_prompt", "common/js/spec_helpers/template_helpers"],
     function($, NotificationView, Prompt, TemplateHelpers) {
         var installViewTemplates, createFeedbackSpy, verifyFeedbackShowing,
             verifyFeedbackHidden, createNotificationSpy, verifyNotificationShowing,

cms/static/js/spec_helpers/edit_helpers.js

 /**
  * Provides helper methods for invoking Studio editors in Jasmine tests.
  */
-define(["jquery", "underscore", "js/common_helpers/ajax_helpers", "js/common_helpers/template_helpers",
+define(["jquery", "underscore", "common/js/spec_helpers/ajax_helpers", "common/js/spec_helpers/template_helpers",
         "js/spec_helpers/modal_helpers", "js/views/modals/edit_xblock", "js/collections/component_template",
         "xmodule", "coffee/src/main", "xblock/cms.runtime.v1"],
     function($, _, AjaxHelpers, TemplateHelpers, modal_helpers, EditXBlockModal, ComponentTemplates) {

cms/static/js/spec_helpers/modal_helpers.js

 /**
  * Provides helper methods for invoking Studio modal windows in Jasmine tests.
  */
-define(["jquery", "js/common_helpers/template_helpers", "js/spec_helpers/view_helpers"],
+define(["jquery", "common/js/spec_helpers/template_helpers", "js/spec_helpers/view_helpers"],
     function($, TemplateHelpers, ViewHelpers) {
         var installModalTemplates, getModalElement, getModalTitle, isShowingModal, hideModalIfShowing,
             pressModalButton, cancelModal, cancelModalIfShowing;

cms/static/js/spec_helpers/validation_helpers.js

 /**
  * Provides helper methods for invoking Validation modal in Jasmine tests.
  */
-define(['jquery', 'js/spec_helpers/modal_helpers', 'js/common_helpers/template_helpers'],
+define(['jquery', 'js/spec_helpers/modal_helpers', 'common/js/spec_helpers/template_helpers'],
     function($, ModalHelpers, TemplateHelpers) {
         var installValidationTemplates, checkErrorContents, undoChanges;
 

cms/static/js/spec_helpers/view_helpers.js

 /**
  * Provides helper methods for invoking Studio modal windows in Jasmine tests.
  */
-define(["jquery", "js/views/feedback_notification", "js/views/feedback_prompt", 'js/common_helpers/ajax_helpers',
-    "js/common_helpers/template_helpers"],
+define(["jquery", "js/views/feedback_notification", "js/views/feedback_prompt", 'common/js/spec_helpers/ajax_helpers',
+    "common/js/spec_helpers/template_helpers"],
     function($, NotificationView, Prompt, AjaxHelpers, TemplateHelpers) {
         var installViewTemplates, createFeedbackSpy, verifyFeedbackShowing,
             verifyFeedbackHidden, createNotificationSpy, verifyNotificationShowing,

cms/static/js/views/assets.js

-define(["jquery", "underscore", "gettext", "js/models/asset", "js/views/paging", "js/views/asset",
-    "js/views/paging_header", "js/views/paging_footer", "js/utils/modal", "js/views/utils/view_utils",
-    "js/views/feedback_notification", "jquery.fileupload-process", "jquery.fileupload-validate"],
-    function($, _, gettext, AssetModel, PagingView, AssetView, PagingHeader, PagingFooter, ModalUtils, ViewUtils, NotificationView) {
+define(["jquery", "underscore", "gettext", "js/views/baseview", "js/models/asset", "common/js/components/views/paging",
+        "js/views/asset", "common/js/components/views/paging_header", "common/js/components/views/paging_footer",
+        "js/utils/modal", "js/views/utils/view_utils", "js/views/feedback_notification",
+        "text!templates/asset-library.underscore",
+        "jquery.fileupload-process", "jquery.fileupload-validate"],
+    function($, _, gettext, BaseView, AssetModel, PagingView, AssetView, PagingHeader, PagingFooter,
+             ModalUtils, ViewUtils, NotificationView, asset_library_template) {
 
         var CONVERSION_FACTOR_MBS_TO_BYTES = 1000 * 1000;
 
-        var AssetsView = PagingView.extend({
+        var AssetsView = BaseView.extend({
             // takes AssetCollection as model
 
             events : {
@@ -19,21 +22,14 @@ define(["jquery", "underscore", "gettext", "js/models/asset", "js/views/paging",
 
             allLabel: 'ALL',
 
-
             initialize : function(options) {
                 options = options || {};
 
-                PagingView.prototype.initialize.call(this);
+                BaseView.prototype.initialize.call(this);
                 var collection = this.collection;
-                this.template = this.loadTemplate("asset-library");
+                this.pagingView = this.createPagingView();
                 this.listenTo(collection, 'destroy', this.handleDestroy);
-                this.registerSortableColumn('js-asset-name-col', gettext('Name'), 'display_name', 'asc');
-                this.registerSortableColumn('js-asset-date-col', gettext('Date Added'), 'date_added', 'desc');
-                this.registerFilterableColumn('js-asset-type-col', gettext('Type'), 'asset_type');
-                this.setInitialSortColumn('js-asset-date-col');
-                this.setInitialFilterColumn('js-asset-type-col');
                 ViewUtils.showLoadingIndicator();
-                this.setPage(0);
                 // set default file size for uploads via template var,
                 // and default to static old value if none exists
                 this.uploadChunkSizeInMBs = options.uploadChunkSizeInMBs || 10;
@@ -41,66 +37,81 @@ define(["jquery", "underscore", "gettext", "js/models/asset", "js/views/paging",
                 this.uploadChunkSizeInBytes = this.uploadChunkSizeInMBs * CONVERSION_FACTOR_MBS_TO_BYTES;
                 this.maxFileSizeInBytes = this.maxFileSizeInMBs * CONVERSION_FACTOR_MBS_TO_BYTES;
                 this.maxFileSizeRedirectUrl = options.maxFileSizeRedirectUrl || '';
-                assetsView = this;
                 // error message modal for large file uploads
                 this.largeFileErrorMsg = null;
             },
 
-            render: function() {
-                // Wait until the content is loaded the first time to render
-                return this;
-            },
-
-            afterRender: function(){
-                // Bind events with html elements
-                $('li a.upload-button').on('click', this.showUploadModal);
-                $('.upload-modal .close-button').on('click', this.hideModal);
-                $('.upload-modal .choose-file-button').on('click', this.showFileSelectionMenu);
-                return this;
-            },
+            PagingAssetView: PagingView.extend({
+                renderPageItems: function() {
+                    var self = this,
+                    assets = this.collection,
+                    hasAssets = this.collection.assetType !== '' || assets.length > 0,
+                    tableBody = this.getTableBody();
+                    tableBody.empty();
+                    if (hasAssets) {
+                        assets.each(
+                            function(asset) {
+                                var view = new AssetView({model: asset});
+                                tableBody.append(view.render().el);
+                            }
+                        );
+                    }
+                    self.$('.assets-library').toggle(hasAssets);
+                    self.$('.no-asset-content').toggle(!hasAssets);
+                    return this;
+                },
+
+                getTableBody: function() {
+                    var tableBody = this.tableBody;
+                    if (!tableBody) {
+                        ViewUtils.hideLoadingIndicator();
+
+                        // Create the table
+                        this.$el.html(_.template(asset_library_template, {typeData: this.typeData}));
+                        tableBody = this.$('#asset-table-body');
+                        this.tableBody = tableBody;
+                        this.pagingHeader = new PagingHeader({view: this, el: $('#asset-paging-header')});
+                        this.pagingFooter = new PagingFooter({view: this, el: $('#asset-paging-footer')});
+                        this.pagingHeader.render();
+                        this.pagingFooter.render();
+
+                        // Hide the contents until the collection has loaded the first time
+                        this.$('.assets-library').hide();
+                        this.$('.no-asset-content').hide();
+                    }
+                    return tableBody;
+                },
 
-            getTableBody: function() {
-                var tableBody = this.tableBody;
-                if (!tableBody) {
+                onError: function() {
                     ViewUtils.hideLoadingIndicator();
-
-                    // Create the table
-                    this.$el.html(this.template({typeData: this.typeData}));
-                    tableBody = this.$('#asset-table-body');
-                    this.tableBody = tableBody;
-                    this.pagingHeader = new PagingHeader({view: this, el: $('#asset-paging-header')});
-                    this.pagingFooter = new PagingFooter({view: this, el: $('#asset-paging-footer')});
-                    this.pagingHeader.render();
-                    this.pagingFooter.render();
-
-                    // Hide the contents until the collection has loaded the first time
-                    this.$('.assets-library').hide();
-                    this.$('.no-asset-content').hide();
                 }
-                return tableBody;
+            }),
+
+            createPagingView: function() {
+                var pagingView = new this.PagingAssetView({
+                    el: this.$el,
+                    collection: this.collection
+                });
+                pagingView.registerSortableColumn('js-asset-name-col', gettext('Name'), 'display_name', 'asc');
+                pagingView.registerSortableColumn('js-asset-date-col', gettext('Date Added'), 'date_added', 'desc');
+                pagingView.registerFilterableColumn('js-asset-type-col', gettext('Type'), 'asset_type');
+                pagingView.setInitialSortColumn('js-asset-date-col');
+                pagingView.setInitialFilterColumn('js-asset-type-col');
+                pagingView.setPage(0);
+                return pagingView;
             },
 
-            renderPageItems: function() {
-                var self = this,
-                assets = this.collection,
-                hasAssets = this.collection.assetType !== '' || assets.length > 0,
-                tableBody = this.getTableBody();
-                tableBody.empty();
-                if (hasAssets) {
-                    assets.each(
-                        function(asset) {
-                            var view = new AssetView({model: asset});
-                            tableBody.append(view.render().el);
-                        }
-                    );
-                }
-                self.$('.assets-library').toggle(hasAssets);
-                self.$('.no-asset-content').toggle(!hasAssets);
+            render: function() {
+                this.pagingView.render();
                 return this;
             },
 
-            onError: function() {
-                ViewUtils.hideLoadingIndicator();
+            afterRender: function(){
+                // Bind events with html elements
+                $('li a.upload-button').on('click', _.bind(this.showUploadModal, this));
+                $('.upload-modal .close-button').on('click', _.bind(this.hideModal, this));
+                $('.upload-modal .choose-file-button').on('click', _.bind(this.showFileSelectionMenu, this));
+                return this;
             },
 
             handleDestroy: function(model) {
@@ -114,9 +125,9 @@ define(["jquery", "underscore", "gettext", "js/models/asset", "js/views/paging",
             addAsset: function (model) {
                 // Switch the sort column back to the default (most recent date added) and show the first page
                 // so that the new asset is shown at the top of the page.
-                this.setInitialSortColumn('js-asset-date-col');
-                this.setInitialFilterColumn('js-asset-type-col');
-                this.setPage(0);
+                this.pagingView.setInitialSortColumn('js-asset-date-col');
+                this.pagingView.setInitialFilterColumn('js-asset-type-col');
+                this.pagingView.setPage(0);
 
                 analytics.track('Uploaded a File', {
                     'course': course_location_analytics,
@@ -126,7 +137,7 @@ define(["jquery", "underscore", "gettext", "js/models/asset", "js/views/paging",
 
             onToggleColumn: function(event) {
                 var columnName = event.target.id;
-                this.toggleSortOrder(columnName);
+                this.pagingView.toggleSortOrder(columnName);
             },
 
             onFilterColumn: function(event) {
@@ -140,13 +151,13 @@ define(["jquery", "underscore", "gettext", "js/models/asset", "js/views/paging",
                 }
                 $('.file-input').unbind('change.startUpload');
                 ModalUtils.hideModal();
-                if (assetsView.largeFileErrorMsg) {
-                  assetsView.largeFileErrorMsg.hide();
+                if (this.largeFileErrorMsg) {
+                  this.largeFileErrorMsg.hide();
                 }
             },
 
             showUploadModal: function (event) {
-                var self = assetsView;
+                var self = this;
                 event.preventDefault();
                 self.resetUploadModal();
                 ModalUtils.showModal();
@@ -180,33 +191,33 @@ define(["jquery", "underscore", "gettext", "js/models/asset", "js/views/paging",
                             error = error + " " + instructions;
                         }
 
-                        assetsView.largeFileErrorMsg = new NotificationView.Error({
+                        self.largeFileErrorMsg = new NotificationView.Error({
                             "title": gettext("Your file could not be uploaded"),
                             "message": error
                         });
-                        assetsView.largeFileErrorMsg.show();
+                        self.largeFileErrorMsg.show();
 
-                        assetsView.displayFailedUpload({
+                        self.displayFailedUpload({
                             "msg": gettext("Max file size exceeded")
                         });
                     },
                     processdone: function(event, data) {
-                        assetsView.largeFileErrorMsg = null;
+                        self.largeFileErrorMsg = null;
                     }
                 });
             },
 
             showFileSelectionMenu: function(event) {
                 event.preventDefault();
-                if (assetsView.largeFileErrorMsg) {
-                  assetsView.largeFileErrorMsg.hide();
+                if (this.largeFileErrorMsg) {
+                  this.largeFileErrorMsg.hide();
                 }
                 $('.file-input').click();
             },
 
             startUpload: function (event) {
                 var file = event.target.value;
-                if (!assetsView.largeFileErrorMsg) {
+                if (!this.largeFileErrorMsg) {
                     $('.upload-modal h1').text(gettext('Uploading'));
                     $('.upload-modal .file-name').html(file.substring(file.lastIndexOf("\\") + 1));
                     $('.upload-modal .choose-file-button').hide();
@@ -228,7 +239,7 @@ define(["jquery", "underscore", "gettext", "js/models/asset", "js/views/paging",
                 $('.upload-modal .embeddable-xml-input').val('');
                 $('.upload-modal .embeddable').hide();
 
-                assetsView.largeFileErrorMsg = null;
+                this.largeFileErrorMsg = null;
             },
 
             showUploadFeedback: function (event, percentComplete) {
@@ -285,8 +296,8 @@ define(["jquery", "underscore", "gettext", "js/models/asset", "js/views/paging",
                     title.addClass('column-selected-link');
                 }
 
-                this.filterableColumns['js-asset-type-col'].displayName = assettypeLabel;
-                this.selectFilter('js-asset-type-col');
+                this.pagingView.filterableColumns['js-asset-type-col'].displayName = assettypeLabel;
+                this.pagingView.selectFilter('js-asset-type-col');
                 this.closeFilterPopup(this.$el.find(
                     '.column-filter-link[data-assetfilter="' + assettype + '"]'));
             },
@@ -307,7 +318,7 @@ define(["jquery", "underscore", "gettext", "js/models/asset", "js/views/paging",
                 $('.upload-modal .choose-file-button').text(gettext('Load Another File')).show();
                 $('.upload-modal .progress-fill').width('100%');
 
-                assetsView.addAsset(new AssetModel(asset));
+                this.addAsset(new AssetModel(asset));
             },
 
             displayFailedUpload: function (resp) {

cms/static/js/views/paged_container.js

 define(["jquery", "underscore", "js/views/utils/view_utils", "js/views/container", "js/utils/module", "gettext",
-        "js/views/feedback_notification", "js/views/paging_header", "js/views/paging_footer", "js/views/paging_mixin"],
+        "js/views/feedback_notification", "common/js/components/views/paging_header",
+        "common/js/components/views/paging_footer", "common/js/components/views/paging_mixin"],
     function ($, _, ViewUtils, ContainerView, ModuleUtils, gettext, NotificationView, PagingHeader, PagingFooter, PagingMixin) {
         var PagedContainerView = ContainerView.extend(PagingMixin).extend({
             initialize: function(options){

cms/static/js_test.yml

@@ -70,14 +70,15 @@ lib_paths:
     - xmodule_js/common_static/js/vendor/jQuery-File-Upload/js/jquery.fileupload-process.js
     - xmodule_js/common_static/js/vendor/jQuery-File-Upload/js/jquery.fileupload-validate.js
     - xmodule_js/common_static/js/vendor/mock-ajax.js
+    - xmodule_js/common_static/js/vendor/requirejs/text.js
 
 # Paths to source JavaScript files
 src_paths:
     - coffee/src
     - js
-    - js/common_helpers
-    - js/factories
     - js/certificates
+    - js/factories
+    - common/js
 
 # Paths to spec (test) JavaScript files
 # We should define the custom path mapping in /coffee/spec/main.coffee as well e.g. certificates etc.
@@ -98,6 +99,8 @@ spec_paths:
 #
 fixture_paths:
     - coffee/fixtures
+    - templates
+    - common/templates
 
 requirejs:
   paths:

cms/static/js_test_squire.yml

@@ -62,12 +62,13 @@ lib_paths:
     - xmodule_js/common_static/js/vendor/jQuery-File-Upload/js/jquery.fileupload.js
     - xmodule_js/common_static/js/vendor/jQuery-File-Upload/js/jquery.fileupload-process.js
     - xmodule_js/common_static/js/vendor/jQuery-File-Upload/js/jquery.fileupload-validate.js
+    - xmodule_js/common_static/js/vendor/requirejs/text.js
 
 # Paths to source JavaScript files
 src_paths:
     - coffee/src
     - js
-    - js/common_helpers
+    - common/js
 
 # Paths to spec (test) JavaScript files
 spec_paths:
@@ -86,6 +87,8 @@ spec_paths:
 #
 fixture_paths:
     - coffee/fixtures
+    - templates
+    - common/templates
 
 requirejs:
   paths:

cms/static/require-config.js

@@ -27,6 +27,7 @@ require.config({
         "jquery.immediateDescendents": "coffee/src/jquery.immediateDescendents",
         "datepair": "js/vendor/timepicker/datepair",
         "date": "js/vendor/date",
+        "text": 'js/vendor/requirejs/text',
         "moment": "js/vendor/moment.min",
         "underscore": "js/vendor/underscore-min",
         "underscore.string": "js/vendor/underscore.string.min",

cms/static/templates

+../templates/js
\ No newline at end of file

cms/templates/asset_index.html

@@ -10,7 +10,7 @@
 <%namespace name='static' file='static_content.html'/>
 
 <%block name="header_extras">
-% for template_name in ["asset-library", "asset", "paging-header", "paging-footer"]:
+% for template_name in ["asset-library", "asset"]:
 <script type="text/template" id="${template_name}-tpl">
     <%static:include path="js/${template_name}.underscore" />
 </script>

cms/templates/container.html

@@ -24,6 +24,9 @@ from django.utils.translation import ugettext as _
     <%static:include path="js/${template_name}.underscore" />
 </script>
 % endfor
+<script type="text/template" id="image-modal-tpl">
+    <%static:include path="common/templates/image-modal.underscore" />
+</script>
 <link rel="stylesheet" type="text/css" href="${static.url('js/vendor/timepicker/jquery.timepicker.css')}" />
 </%block>
 

cms/templates/js/mock/mock-container-paged-xblock.underscore

@@ -13,39 +13,6 @@
     <div class="xblock" data-locator="locator-container" data-request-token="page-render-token"
          data-init="MockXBlock" data-runtime-class="StudioRuntime" data-runtime-version="1">
 
-         <script type="text/template" id="paging-header-tpl">
-		    <div class="meta-wrap">
-		    <div class="meta">
-		        <%= messageHtml %>
-		    </div>
-		    <nav class="pagination pagination-compact top">
-		        <ol>
-		            <li class="nav-item previous"><a class="nav-link previous-page-link" href="#"><i class="icon fa fa-angle-left"></i> <span class="nav-label">Previous</span></a></li>
-		            <li class="nav-item next"><a class="nav-link next-page-link" href="#"><span class="nav-label">Next</span> <i class="icon fa fa-angle-right"></i></a></li>
-		        </ol>
-		    </nav>
-		</div>
-
-		</script>
-		<script type="text/template" id="paging-footer-tpl">
-		    <nav class="pagination pagination-full bottom">
-                <ol>
-                    <li class="nav-item previous"><a class="nav-link previous-page-link" href="#"><i class="icon fa fa-angle-left"></i> <span class="nav-label">Previous</span></a></li>
-                    <li class="nav-item page">
-                        <div class="pagination-form">
-                            <label class="page-number-label" for="page-number">Page number</label>
-                            <input id="page-number-input" class="page-number-input" name="page-number" type="text" size="4" />
-                        </div>
-
-                        <span class="current-page"><%= current_page + 1 %></span>
-                        <span class="page-divider">/</span>
-                        <span class="total-pages"><%= total_pages %></span>
-                    </li>
-                    <li class="nav-item next"><a class="nav-link next-page-link" href="#"><span class="nav-label">Next</span> <i class="icon fa fa-angle-right"></i></a></li>
-                </ol>
-		    </nav>
-		</script>
-
 		<div class="container-paging-header"></div>
 
         <div class="studio-xblock-wrapper" data-locator="locator-group-A">

cms/templates/js/mock/mock-paged-container-xblock.underscore

@@ -13,39 +13,6 @@
     <div class="xblock" data-locator="locator-container" data-request-token="page-render-token"
          data-init="MockXBlock" data-runtime-class="StudioRuntime" data-runtime-version="1">
 
-         <script type="text/template" id="paging-header-tpl">
-		    <div class="meta-wrap">
-		    <div class="meta">
-		        <%= messageHtml %>
-		    </div>
-		    <nav class="pagination pagination-compact top">
-		        <ol>
-		            <li class="nav-item previous"><a class="nav-link previous-page-link" href="#"><i class="icon fa fa-angle-left"></i> <span class="nav-label">Previous</span></a></li>
-		            <li class="nav-item next"><a class="nav-link next-page-link" href="#"><span class="nav-label">Next</span> <i class="icon fa fa-angle-right"></i></a></li>
-		        </ol>
-		    </nav>
-		</div>
-
-		</script>
-		<script type="text/template" id="paging-footer-tpl">
-		    <nav class="pagination pagination-full bottom">
-                <ol>
-                    <li class="nav-item previous"><a class="nav-link previous-page-link" href="#"><i class="icon fa fa-angle-left"></i> <span class="nav-label">Previous</span></a></li>
-                    <li class="nav-item page">
-                        <div class="pagination-form">
-                            <label class="page-number-label" for="page-number">Page number</label>
-                            <input id="page-number-input" class="page-number-input" name="page-number" type="text" size="4" />
-                        </div>
-
-                        <span class="current-page"><%= current_page + 1 %></span>
-                        <span class="page-divider">/</span>
-                        <span class="total-pages"><%= total_pages %></span>
-                    </li>
-                    <li class="nav-item next"><a class="nav-link next-page-link" href="#"><span class="nav-label">Next</span> <i class="icon fa fa-angle-right"></i></a></li>
-                </ol>
-		    </nav>
-		</script>
-
 		<div class="container-paging-header"></div>
 
         <div class="studio-xblock-wrapper" data-locator="locator-group-A">

cms/templates/library.html

@@ -17,6 +17,9 @@ from django.utils.translation import ugettext as _
     <%static:include path="js/${template_name}.underscore" />
 </script>
 % endfor
+<script type="text/template" id="image-modal-tpl">
+    <%static:include path="common/templates/image-modal.underscore" />
+</script>
 </%block>
 
 <%block name="requirejs">

common/static/coffee/spec/discussion/discussion_spec_helper.coffee

@@ -38,7 +38,7 @@ class @DiscussionSpecHelper
 
     @setUnderscoreFixtures = ->
         for templateName in ['thread-show']
-            templateFixture = readFixtures('templates/discussion/' + templateName + '.underscore')
+            templateFixture = readFixtures('common/templates/discussion/' + templateName + '.underscore')
             appendSetFixtures($('<script>', { id: templateName + '-template', type: 'text/template' })
                 .text(templateFixture))
         appendSetFixtures("""

cms/static/js/views/paging.js → common/static/common/js/components/views/paging.js

-define(["underscore", "js/views/baseview", "js/views/feedback_alert", "gettext", "js/views/paging_mixin"],
-    function(_, BaseView, AlertView, gettext, PagingMixin) {
+define(["underscore", "backbone", "gettext", "common/js/components/views/paging_mixin"],
+    function(_, Backbone, gettext, PagingMixin) {
 
-        var PagingView = BaseView.extend(PagingMixin).extend({
+        var PagingView = Backbone.View.extend(PagingMixin).extend({
             // takes a Backbone Paginator as a model
 
             sortableColumns: {},
@@ -11,7 +11,7 @@ define(["underscore", "js/views/baseview", "js/views/feedback_alert", "gettext",
             filterColumn: '',
 
             initialize: function() {
-                BaseView.prototype.initialize.call(this);
+                Backbone.View.prototype.initialize.call(this);
                 var collection = this.collection;
                 collection.bind('add', _.bind(this.onPageRefresh, this));
                 collection.bind('remove', _.bind(this.onPageRefresh, this));

cms/static/js/views/paging_footer.js → common/static/common/js/components/views/paging_footer.js

-define(["underscore", "js/views/baseview"], function(_, BaseView) {
+define(["underscore", "backbone", "text!common/templates/components/paging-footer.underscore"],
+    function(_, Backbone, paging_footer_template) {
 
-    var PagingFooter = BaseView.extend({
-        events : {
-            "click .next-page-link": "nextPage",
-            "click .previous-page-link": "previousPage",
-            "change .page-number-input": "changePage"
-        },
+        var PagingFooter = Backbone.View.extend({
+            events : {
+                "click .next-page-link": "nextPage",
+                "click .previous-page-link": "previousPage",
+                "change .page-number-input": "changePage"
+            },
 
-        initialize: function(options) {
-            var view = options.view,
-                collection = view.collection;
-            this.view = view;
-            this.template = this.loadTemplate('paging-footer');
-            collection.bind('add', _.bind(this.render, this));
-            collection.bind('remove', _.bind(this.render, this));
-            collection.bind('reset', _.bind(this.render, this));
-            this.render();
-        },
+            initialize: function(options) {
+                var view = options.view,
+                    collection = view.collection;
+                this.view = view;
+                collection.bind('add', _.bind(this.render, this));
+                collection.bind('remove', _.bind(this.render, this));
+                collection.bind('reset', _.bind(this.render, this));
+                this.render();
+            },
 
-        render: function() {
-            var view = this.view,
-                collection = view.collection,
-                currentPage = collection.currentPage,
-                lastPage = collection.totalPages - 1;
-            this.$el.html(this.template({
-                current_page: collection.currentPage,
-                total_pages: collection.totalPages
-            }));
-            this.$(".previous-page-link").toggleClass("is-disabled", currentPage === 0).attr('aria-disabled', currentPage === 0);;
-            this.$(".next-page-link").toggleClass("is-disabled", currentPage === lastPage).attr('aria-disabled', currentPage === lastPage);
-            return this;
-        },
+            render: function() {
+                var view = this.view,
+                    collection = view.collection,
+                    currentPage = collection.currentPage,
+                    lastPage = collection.totalPages - 1;
+                this.$el.html(_.template(paging_footer_template, {
+                    current_page: collection.currentPage,
+                    total_pages: collection.totalPages
+                }));
+                this.$(".previous-page-link").toggleClass("is-disabled", currentPage === 0).attr('aria-disabled', currentPage === 0);;
+                this.$(".next-page-link").toggleClass("is-disabled", currentPage === lastPage).attr('aria-disabled', currentPage === lastPage);
+                return this;
+            },
 
-        changePage: function() {
-            var view = this.view,
-                collection = view.collection,
-                currentPage = collection.currentPage + 1,
-                pageInput = this.$("#page-number-input"),
-                pageNumber = parseInt(pageInput.val(), 10);
-            if (pageNumber > collection.totalPages) {
-                pageNumber = false;
-            }
-            if (pageNumber <= 0) {
-                pageNumber = false;
-            }
-            // If we still have a page number by this point,
-            // and it's not the current page, load it.
-            if (pageNumber && pageNumber !== currentPage) {
-                view.setPage(pageNumber - 1);
-            }
-            pageInput.val(""); // Clear the value as the label will show beneath it
-        },
+            changePage: function() {
+                var view = this.view,
+                    collection = view.collection,
+                    currentPage = collection.currentPage + 1,
+                    pageInput = this.$("#page-number-input"),
+                    pageNumber = parseInt(pageInput.val(), 10);
+                if (pageNumber > collection.totalPages) {
+                    pageNumber = false;
+                }
+                if (pageNumber <= 0) {
+                    pageNumber = false;
+                }
+                // If we still have a page number by this point,
+                // and it's not the current page, load it.
+                if (pageNumber && pageNumber !== currentPage) {
+                    view.setPage(pageNumber - 1);
+                }
+                pageInput.val(""); // Clear the value as the label will show beneath it
+            },
 
-        nextPage: function() {
-            this.view.nextPage();
-        },
+            nextPage: function() {
+                this.view.nextPage();
+            },
 
-        previousPage: function() {
-            this.view.previousPage();
-        }
-    });
+            previousPage: function() {
+                this.view.previousPage();
+            }
+        });
 
-    return PagingFooter;
-}); // end define();
+        return PagingFooter;
+    }); // end define();

cms/static/js/views/paging_header.js → common/static/common/js/components/views/paging_header.js

-define(["underscore", "gettext", "js/views/baseview"], function(_, gettext, BaseView) {
+define(["underscore", "backbone", "gettext", "text!common/templates/components/paging-header.underscore"],
+    function(_, Backbone, gettext, paging_header_template) {
 
-    var PagingHeader = BaseView.extend({
-        events : {
-            "click .next-page-link": "nextPage",
-            "click .previous-page-link": "previousPage"
-        },
+        var PagingHeader = Backbone.View.extend({
+            events : {
+                "click .next-page-link": "nextPage",
+                "click .previous-page-link": "previousPage"
+            },
 
-        initialize: function(options) {
-            var view = options.view,
-                collection = view.collection;
-            this.view = view;
-            this.template = this.loadTemplate('paging-header');
-            collection.bind('add', _.bind(this.render, this));
-            collection.bind('remove', _.bind(this.render, this));
-            collection.bind('reset', _.bind(this.render, this));
-        },
+            initialize: function(options) {
+                var view = options.view,
+                    collection = view.collection;
+                this.view = view;
+                collection.bind('add', _.bind(this.render, this));
+                collection.bind('remove', _.bind(this.render, this));
+                collection.bind('reset', _.bind(this.render, this));
+            },
 
-        render: function() {
-            var view = this.view,
-                collection = view.collection,
-                currentPage = collection.currentPage,
-                lastPage = collection.totalPages - 1,
-                messageHtml = this.messageHtml();
-            this.$el.html(this.template({
-                messageHtml: messageHtml
-            }));
-            this.$(".previous-page-link").toggleClass("is-disabled", currentPage === 0).attr('aria-disabled', currentPage === 0);
-            this.$(".next-page-link").toggleClass("is-disabled", currentPage === lastPage).attr('aria-disabled', currentPage === lastPage);
-            return this;
-        },
+            render: function() {
+                var view = this.view,
+                    collection = view.collection,
+                    currentPage = collection.currentPage,
+                    lastPage = collection.totalPages - 1,
+                    messageHtml = this.messageHtml();
+                this.$el.html(_.template(paging_header_template, {
+                    messageHtml: messageHtml
+                }));
+                this.$(".previous-page-link").toggleClass("is-disabled", currentPage === 0).attr('aria-disabled', currentPage === 0);
+                this.$(".next-page-link").toggleClass("is-disabled", currentPage === lastPage).attr('aria-disabled', currentPage === lastPage);
+                return this;
+            },
 
-        messageHtml: function() {
-            var message = '';
-            var asset_type = false;
-            if (this.view.collection.assetType) {
-                if (this.view.collection.sortDirection === 'asc') {
-                    // Translators: sample result:
-                    // "Showing 0-9 out of 25 total, filtered by Images, sorted by Date Added ascending"
-                    message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, filtered by %(asset_type)s, sorted by %(sort_name)s ascending');
-                } else {
-                    // Translators: sample result:
-                    // "Showing 0-9 out of 25 total, filtered by Images, sorted by Date Added descending"
-                    message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, filtered by %(asset_type)s, sorted by %(sort_name)s descending');
+            messageHtml: function() {
+                var message = '';
+                var asset_type = false;
+                if (this.view.collection.assetType) {
+                    if (this.view.collection.sortDirection === 'asc') {
+                        // Translators: sample result:
+                        // "Showing 0-9 out of 25 total, filtered by Images, sorted by Date Added ascending"
+                        message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, filtered by %(asset_type)s, sorted by %(sort_name)s ascending');
+                    } else {
+                        // Translators: sample result:
+                        // "Showing 0-9 out of 25 total, filtered by Images, sorted by Date Added descending"
+                        message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, filtered by %(asset_type)s, sorted by %(sort_name)s descending');
+                    }
+                    asset_type = this.filterNameLabel();
                 }
-                asset_type = this.filterNameLabel();
-            }
-            else {
-                if (this.view.collection.sortDirection === 'asc') {
-                    // Translators: sample result:
-                    // "Showing 0-9 out of 25 total, sorted by Date Added ascending"
-                    message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, sorted by %(sort_name)s ascending');
-                } else {
-                    // Translators: sample result:
-                    // "Showing 0-9 out of 25 total, sorted by Date Added descending"
-                    message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, sorted by %(sort_name)s descending');
+                else {
+                    if (this.view.collection.sortDirection === 'asc') {
+                        // Translators: sample result:
+                        // "Showing 0-9 out of 25 total, sorted by Date Added ascending"
+                        message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, sorted by %(sort_name)s ascending');
+                    } else {
+                        // Translators: sample result:
+                        // "Showing 0-9 out of 25 total, sorted by Date Added descending"
+                        message = gettext('Showing %(current_item_range)s out of %(total_items_count)s, sorted by %(sort_name)s descending');
+                    }
                 }
-            }
 
-            return '<p>' + interpolate(message, {
-                current_item_range: this.currentItemRangeLabel(),
-                total_items_count: this.totalItemsCountLabel(),
-                asset_type: asset_type,
-                sort_name: this.sortNameLabel()
-            }, true) + "</p>";
-        },
+                return '<p>' + interpolate(message, {
+                        current_item_range: this.currentItemRangeLabel(),
+                        total_items_count: this.totalItemsCountLabel(),
+                        asset_type: asset_type,
+                        sort_name: this.sortNameLabel()
+                    }, true) + "</p>";
+            },
 
-        currentItemRangeLabel: function() {
-            var view = this.view,
-                collection = view.collection,
-                start = collection.start,
-                count = collection.size(),
-                end = start + count;
-            return interpolate('<span class="count-current-shown">%(start)s-%(end)s</span>', {
-                start: Math.min(start + 1, end),
-                end: end
-            }, true);
-        },
+            currentItemRangeLabel: function() {
+                var view = this.view,
+                    collection = view.collection,
+                    start = collection.start,
+                    count = collection.size(),
+                    end = start + count;
+                return interpolate('<span class="count-current-shown">%(start)s-%(end)s</span>', {
+                    start: Math.min(start + 1, end),
+                    end: end
+                }, true);
+            },
 
-        totalItemsCountLabel: function() {
-            var totalItemsLabel;
-            // Translators: turns into "25 total" to be used in other sentences, e.g. "Showing 0-9 out of 25 total".
-            totalItemsLabel = interpolate(gettext('%(total_items)s total'), {
-                total_items: this.view.collection.totalCount
-            }, true);
-            return interpolate('<span class="count-total">%(total_items_label)s</span>', {
-                total_items_label: totalItemsLabel
-            }, true);
-        },
+            totalItemsCountLabel: function() {
+                var totalItemsLabel;
+                // Translators: turns into "25 total" to be used in other sentences, e.g. "Showing 0-9 out of 25 total".
+                totalItemsLabel = interpolate(gettext('%(total_items)s total'), {
+                    total_items: this.view.collection.totalCount
+                }, true);
+                return interpolate('<span class="count-total">%(total_items_label)s</span>', {
+                    total_items_label: totalItemsLabel
+                }, true);
+            },
 
-        sortNameLabel: function() {
-            return interpolate('<span class="sort-order">%(sort_name)s</span>', {
-                sort_name: this.view.sortDisplayName()
-            }, true);
-        },
+            sortNameLabel: function() {
+                return interpolate('<span class="sort-order">%(sort_name)s</span>', {
+                    sort_name: this.view.sortDisplayName()
+                }, true);
+            },
 
-        filterNameLabel: function() {
-            return interpolate('<span class="filter-column">%(filter_name)s</span>', {
-                filter_name: this.view.filterDisplayName()
-            }, true);
-        },
+            filterNameLabel: function() {
+                return interpolate('<span class="filter-column">%(filter_name)s</span>', {
+                    filter_name: this.view.filterDisplayName()
+                }, true);
+            },
 
-        nextPage: function() {
-            this.view.nextPage();
-        },
+            nextPage: function() {
+                this.view.nextPage();
+            },
 
-        previousPage: function() {
-            this.view.previousPage();
-        }
-    });
+            previousPage: function() {
+                this.view.previousPage();
+            }
+        });
 
-    return PagingHeader;
-}); // end define();
+        return PagingHeader;
+    }); // end define();

common/static/common/js/spec/components/paging_collection.js

+define(["backbone.paginator", "backbone"], function(BackbonePaginator, Backbone) {
+    // This code was adapted from collections/asset.js.
+    var PagingCollection = BackbonePaginator.requestPager.extend({
+        model : Backbone.Model,
+        paginator_core: {
+            type: 'GET',
+            accepts: 'application/json',
+            dataType: 'json',
+            url: function() { return this.url; }
+        },
+        paginator_ui: {
+            firstPage: 0,
+            currentPage: 0,
+            perPage: 50
+        },
+        server_api: {
+            'page': function() { return this.currentPage; },
+            'page_size': function() { return this.perPage; },
+            'sort': function() { return this.sortField; },
+            'direction': function() { return this.sortDirection; },
+            'format': 'json'
+        },
+
+        parse: function(response) {
+            var totalCount = response.totalCount,
+                start = response.start,
+                currentPage = response.page,
+                pageSize = response.pageSize,
+                totalPages = Math.ceil(totalCount / pageSize);
+            this.totalCount = totalCount;
+            this.totalPages = Math.max(totalPages, 1); // Treat an empty collection as having 1 page...
+            this.currentPage = currentPage;
+            this.start = start;
+            return response.items;
+        }
+    });
+    return PagingCollection;
+});

cms/static/js/spec/views/paging_spec.js → common/static/common/js/spec/components/paging_spec.js

-define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
-    "js/views/paging", "js/views/paging_header", "js/views/paging_footer",
-    "js/models/asset", "js/collections/asset" ],
-    function ($, AjaxHelpers, URI, PagingView, PagingHeader, PagingFooter, AssetModel, AssetCollection) {
+define([ "jquery", "common/js/spec_helpers/ajax_helpers", "URI",
+    "common/js/components/views/paging", "common/js/components/views/paging_header",
+    "common/js/components/views/paging_footer", "common/js/spec/components/paging_collection"],
+    function ($, AjaxHelpers, URI, PagingView, PagingHeader, PagingFooter, PagingCollection) {
 
-        var createMockAsset = function(index) {
-            var id = 'asset_' + index;
+        var createPageableItem = function(index) {
+            var id = 'item_' + index;
             return {
                 id: id,
                 display_name: id,
@@ -13,10 +13,10 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
         };
 
         var mockFirstPage = {
-            assets: [
-                createMockAsset(1),
-                createMockAsset(2),
-                createMockAsset(3)
+            items: [
+                createPageableItem(1),
+                createPageableItem(2),
+                createPageableItem(3)
             ],
             pageSize: 3,
             totalCount: 4,
@@ -25,8 +25,8 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
             end: 2
         };
         var mockSecondPage = {
-            assets: [
-                createMockAsset(4)
+            items: [
+                createPageableItem(4)
             ],
             pageSize: 3,
             totalCount: 4,
@@ -35,7 +35,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
             end: 4
         };
         var mockEmptyPage = {
-            assets: [],
+            items: [],
             pageSize: 3,
             totalCount: 0,
             page: 0,
@@ -43,7 +43,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
             end: 0
         };
 
-        var respondWithMockAssets = function(requests) {
+        var respondWithMockItems = function(requests) {
             var requestIndex = requests.length - 1;
             var request = requests[requestIndex];
             var url = new URI(request.url);
@@ -58,9 +58,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
             initialize : function() {
                 this.registerSortableColumn('name-col', 'Name', 'name', 'asc');
                 this.registerSortableColumn('date-col', 'Date', 'date', 'desc');
-                this.registerFilterableColumn('js-asset-type-col', gettext('Type'), 'asset_type');
                 this.setInitialSortColumn('date-col');
-                this.setInitialFilterColumn('js-asset-type-col');
             }
         });
 
@@ -68,30 +66,25 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
             var pagingView;
 
             beforeEach(function () {
-                var assets = new AssetCollection();
-                assets.url = "assets_url";
-                var feedbackTpl = readFixtures('system-feedback.underscore');
-                setFixtures($("<script>", { id: "system-feedback-tpl", type: "text/template" }).text(feedbackTpl));
-                pagingView = new MockPagingView({collection: assets});
+                pagingView = new MockPagingView({collection: new PagingCollection()});
             });
 
-
             describe("PagingView", function () {
                 describe("setPage", function () {
                     it('can set the current page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingView.collection.currentPage).toBe(0);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingView.collection.currentPage).toBe(1);
                     });
 
                     it('should not change page after a server error', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingView.setPage(1);
                         requests[1].respond(500);
                         expect(pagingView.collection.currentPage).toBe(0);
@@ -102,7 +95,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('does not move forward after a server error', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingView.nextPage();
                         requests[1].respond(500);
                         expect(pagingView.collection.currentPage).toBe(0);
@@ -111,16 +104,16 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('can move to the next page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingView.nextPage();
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingView.collection.currentPage).toBe(1);
                     });
 
                     it('can not move forward from the final page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingView.nextPage();
                         expect(requests.length).toBe(1);
                     });
@@ -131,16 +124,16 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('can move back a page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingView.previousPage();
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingView.collection.currentPage).toBe(0);
                     });
 
                     it('can not move back from the first page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingView.previousPage();
                         expect(requests.length).toBe(1);
                     });
@@ -148,7 +141,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('does not move back after a server error', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingView.previousPage();
                         requests[1].respond(500);
                         expect(pagingView.collection.currentPage).toBe(1);
@@ -161,21 +154,21 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                         var requests = AjaxHelpers.requests(this);
                         expect(pagingView.collection.sortDirection).toBe('desc');
                         pagingView.toggleSortOrder('date-col');
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingView.collection.sortDirection).toBe('asc');
                         pagingView.toggleSortOrder('date-col');
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingView.collection.sortDirection).toBe('desc');
                     });
 
                     it('sets the correct default sort direction for a column', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.toggleSortOrder('name-col');
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingView.sortDisplayName()).toBe('Name');
                         expect(pagingView.collection.sortDirection).toBe('asc');
                         pagingView.toggleSortOrder('date-col');
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingView.sortDisplayName()).toBe('Date');
                         expect(pagingView.collection.sortDirection).toBe('desc');
                     });
@@ -185,7 +178,6 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
 
                     it('returns the registered info for a column', function () {
                         pagingView.registerSortableColumn('test-col', 'Test Column', 'testField', 'asc');
-                        pagingView.registerFilterableColumn('js-asset-type-col', gettext('Type'), 'asset_type');
                         var sortInfo = pagingView.sortableColumnInfo('test-col');
                         expect(sortInfo.displayName).toBe('Test Column');
                         expect(sortInfo.fieldName).toBe('testField');
@@ -204,8 +196,6 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                 var pagingHeader;
 
                 beforeEach(function () {
-                    var pagingHeaderTpl = readFixtures('paging-header.underscore');
-                    appendSetFixtures($("<script>", { id: "paging-header-tpl", type: "text/template" }).text(pagingHeaderTpl));
                     pagingHeader = new PagingHeader({view: pagingView});
                 });
 
@@ -219,7 +209,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('does not move forward if a server error occurs', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingHeader.$('.next-page-link').click();
                         requests[1].respond(500);
                         expect(pagingView.collection.currentPage).toBe(0);
@@ -228,23 +218,23 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('can move to the next page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingHeader.$('.next-page-link').click();
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingView.collection.currentPage).toBe(1);
                     });
 
                     it('should be enabled when there is at least one more page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingHeader.$('.next-page-link')).not.toHaveClass('is-disabled');
                     });
 
                     it('should be disabled on the final page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingHeader.$('.next-page-link')).toHaveClass('is-disabled');
                     });
 
@@ -266,7 +256,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('does not move back if a server error occurs', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingHeader.$('.previous-page-link').click();
                         requests[1].respond(500);
                         expect(pagingView.collection.currentPage).toBe(1);
@@ -275,23 +265,23 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('can go back a page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingHeader.$('.previous-page-link').click();
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingView.collection.currentPage).toBe(0);
                     });
 
                     it('should be disabled on the first page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingHeader.$('.previous-page-link')).toHaveClass('is-disabled');
                     });
 
                     it('should be enabled on the second page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingHeader.$('.previous-page-link')).not.toHaveClass('is-disabled');
                     });
 
@@ -308,7 +298,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                         var requests = AjaxHelpers.requests(this),
                             message;
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         message = pagingHeader.$('.meta').html().trim();
                         expect(message).toBe('<p>Showing <span class="count-current-shown">1-3</span>' +
                             ' out of <span class="count-total">4 total</span>, ' +
@@ -320,7 +310,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                             message;
                         pagingView.setPage(0);
                         pagingView.toggleSortOrder('name-col');
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         message = pagingHeader.$('.meta').html().trim();
                         expect(message).toBe('<p>Showing <span class="count-current-shown">1-3</span>' +
                             ' out of <span class="count-total">4 total</span>, ' +
@@ -328,18 +318,18 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     });
                 });
 
-                describe("Asset count label", function () {
+                describe("Item count label", function () {
                     it('should show correct count on first page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingHeader.$('.count-current-shown')).toHaveHtml('1-3');
                     });
 
                     it('should show correct count on second page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingHeader.$('.count-current-shown')).toHaveHtml('4-4');
                     });
 
@@ -351,18 +341,18 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     });
                 });
 
-                describe("Asset total label", function () {
+                describe("Item total label", function () {
                     it('should show correct total on the first page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingHeader.$('.count-total')).toHaveText('4 total');
                     });
 
                     it('should show correct total on the second page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingHeader.$('.count-total')).toHaveText('4 total');
                     });
 
@@ -378,14 +368,14 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('should show correct initial sort order', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingHeader.$('.sort-order')).toHaveText('Date');
                     });
 
                     it('should show updated sort order', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.toggleSortOrder('name-col');
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingHeader.$('.sort-order')).toHaveText('Name');
                     });
                 });
@@ -395,8 +385,6 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                 var pagingFooter;
 
                 beforeEach(function () {
-                    var pagingFooterTpl = readFixtures('paging-footer.underscore');
-                    appendSetFixtures($("<script>", { id: "paging-footer-tpl", type: "text/template" }).text(pagingFooterTpl));
                     pagingFooter = new PagingFooter({view: pagingView});
                 });
 
@@ -410,7 +398,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('does not move forward if a server error occurs', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingFooter.$('.next-page-link').click();
                         requests[1].respond(500);
                         expect(pagingView.collection.currentPage).toBe(0);
@@ -419,23 +407,23 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('can move to the next page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingFooter.$('.next-page-link').click();
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingView.collection.currentPage).toBe(1);
                     });
 
                     it('should be enabled when there is at least one more page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingFooter.$('.next-page-link')).not.toHaveClass('is-disabled');
                     });
 
                     it('should be disabled on the final page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingFooter.$('.next-page-link')).toHaveClass('is-disabled');
                     });
 
@@ -457,7 +445,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('does not move back if a server error occurs', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingFooter.$('.previous-page-link').click();
                         requests[1].respond(500);
                         expect(pagingView.collection.currentPage).toBe(1);
@@ -466,23 +454,23 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('can go back a page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingFooter.$('.previous-page-link').click();
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingView.collection.currentPage).toBe(0);
                     });
 
                     it('should be disabled on the first page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingFooter.$('.previous-page-link')).toHaveClass('is-disabled');
                     });
 
                     it('should be enabled on the second page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingFooter.$('.previous-page-link')).not.toHaveClass('is-disabled');
                     });
 
@@ -498,14 +486,14 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('should show 1 on the first page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingFooter.$('.current-page')).toHaveText('1');
                     });
 
                     it('should show 2 on the second page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(1);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingFooter.$('.current-page')).toHaveText('2');
                     });
 
@@ -521,11 +509,11 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('should show the correct value with more than one page', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingFooter.$('.total-pages')).toHaveText('2');
                     });
 
-                    it('should show page 1 when there are no assets', function () {
+                    it('should show page 1 when there are no pageable items', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
                         AjaxHelpers.respondWithJson(requests, mockEmptyPage);
@@ -543,14 +531,14 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('should initially have a blank page input', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         expect(pagingFooter.$('.page-number-input')).toHaveValue('');
                     });
 
                     it('should handle invalid page requests', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingFooter.$('.page-number-input').val('abc');
                         pagingFooter.$('.page-number-input').trigger('change');
                         expect(pagingView.collection.currentPage).toBe(0);
@@ -560,7 +548,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('should switch pages via the input field', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingFooter.$('.page-number-input').val('2');
                         pagingFooter.$('.page-number-input').trigger('change');
                         AjaxHelpers.respondWithJson(requests, mockSecondPage);
@@ -571,7 +559,7 @@ define([ "jquery", "js/common_helpers/ajax_helpers", "URI",
                     it('should handle AJAX failures when switching pages via the input field', function () {
                         var requests = AjaxHelpers.requests(this);
                         pagingView.setPage(0);
-                        respondWithMockAssets(requests);
+                        respondWithMockItems(requests);
                         pagingFooter.$('.page-number-input').val('2');
                         pagingFooter.$('.page-number-input').trigger('change');
                         requests[1].respond(500);

common/static/js/spec/main_requirejs.js

+(function(requirejs, define) {
+    requirejs.config({
+        paths: {
+            'gettext': 'js/test/i18n',
+            'jquery': 'js/vendor/jquery.min',
+            'jquery.ui': 'js/vendor/jquery-ui.min',
+            'jquery.flot': 'js/vendor/flot/jquery.flot.min',
+            'jquery.form': 'js/vendor/jquery.form',
+            'jquery.markitup': 'js/vendor/markitup/jquery.markitup',
+            'jquery.leanModal': 'js/vendor/jquery.leanModal.min',
+            'jquery.ajaxQueue': 'js/vendor/jquery.ajaxQueue',
+            'jquery.smoothScroll': 'js/vendor/jquery.smooth-scroll.min',
+            'jquery.scrollTo': 'js/vendor/jquery.scrollTo-1.4.2-min',
+            'jquery.timepicker': 'js/vendor/timepicker/jquery.timepicker',
+            'jquery.cookie': 'js/vendor/jquery.cookie',
+            'jquery.qtip': 'js/vendor/jquery.qtip.min',
+            'jquery.fileupload': 'js/vendor/jQuery-File-Upload/js/jquery.fileupload',
+            'jquery.iframe-transport': 'js/vendor/jQuery-File-Upload/js/jquery.iframe-transport',
+            'jquery.inputnumber': 'js/vendor/html5-input-polyfills/number-polyfill',
+            'jquery.immediateDescendents': 'coffee/src/jquery.immediateDescendents',
+            'jquery.simulate': 'js/vendor/jquery.simulate',
+            'jquery.url': 'js/vendor/url.min',
+            'sinon': 'js/vendor/sinon-1.7.1',
+            'text': 'js/vendor/requirejs/text',
+            'underscore': 'js/vendor/underscore-min',
+            'underscore.string': 'js/vendor/underscore.string.min',
+            'backbone': 'js/vendor/backbone-min',
+            'backbone.associations': 'js/vendor/backbone-associations-min',
+            'backbone.paginator': 'js/vendor/backbone.paginator.min',
+            "backbone-super": "js/vendor/backbone-super",
+            'jasmine-jquery': 'js/vendor/jasmine-jquery',
+            'jasmine-imagediff': 'js/vendor/jasmine-imagediff',
+            'jasmine-stealth': 'js/vendor/jasmine-stealth',
+            'jasmine.async': 'js/vendor/jasmine.async',
+            'URI': 'js/vendor/URI.min'
+        },
+        shim: {
+            'gettext': {
+                exports: 'gettext'
+            },
+            'jquery.ui': {
+                deps: ['jquery'],
+                exports: 'jQuery.ui'
+            },
+            'jquery.flot': {
+                deps: ['jquery'],
+                exports: 'jQuery.flot'
+            },
+            'jquery.form': {
+                deps: ['jquery'],
+                exports: 'jQuery.fn.ajaxForm'
+            },
+            'jquery.markitup': {
+                deps: ['jquery'],
+                exports: 'jQuery.fn.markitup'
+            },
+            'jquery.leanModal': {
+                deps: ['jquery'],
+                exports: 'jQuery.fn.leanModal'
+            },
+            'jquery.smoothScroll': {
+                deps: ['jquery'],
+                exports: 'jQuery.fn.smoothScroll'
+            },
+            'jquery.ajaxQueue': {
+                deps: ['jquery'],
+                exports: 'jQuery.fn.ajaxQueue'
+            },
+            'jquery.scrollTo': {
+                deps: ['jquery'],
+                exports: 'jQuery.fn.scrollTo'
+            },
+            'jquery.cookie': {
+                deps: ['jquery'],
+                exports: 'jQuery.fn.cookie'
+            },
+            'jquery.qtip': {
+                deps: ['jquery'],
+                exports: 'jQuery.fn.qtip'
+            },
+            'jquery.fileupload': {
+                deps: ['jquery.iframe-transport'],
+                exports: 'jQuery.fn.fileupload'
+            },
+            'jquery.inputnumber': {
+                deps: ['jquery'],
+                exports: 'jQuery.fn.inputNumber'
+            },
+            'jquery.simulate': {
+                deps: ['jquery'],
+                exports: 'jQuery.fn.simulate'
+            },
+            'jquery.url': {
+                deps: ['jquery'],
+                exports: 'jQuery.fn.url'
+            },
+            'datepair': {
+                deps: ['jquery.ui', 'jquery.timepicker']
+            },
+            'underscore': {
+                deps: ['underscore.string'],
+                exports: '_',
+                init: function(UnderscoreString) {
+                    /* Mix non-conflicting functions from underscore.string
+                     * (all but include, contains, and reverse) into the
+                     * Underscore namespace. This allows the login, register,
+                     * and password reset templates to render independent of the
+                     * access view.
+                     */
+                    _.mixin(UnderscoreString.exports());
+
+                    /* Since the access view is not using RequireJS, we also
+                     * expose underscore.string at _.str, so that the access
+                     * view can perform the mixin on its own.
+                     */
+                    _.str = UnderscoreString;
+                }
+            },
+            'backbone': {
+                deps: ['underscore', 'jquery'],
+                exports: 'Backbone'
+            },
+            'backbone.associations': {
+                deps: ['backbone'],
+                exports: 'Backbone.Associations'
+            },
+            'backbone.paginator': {
+                deps: ['backbone'],
+                exports: 'Backbone.Paginator'
+            },
+            "backbone-super": {
+                deps: ["backbone"]
+            },
+            'URI': {
+                exports: 'URI'
+            },
+            'jasmine-jquery': {
+                deps: ['jasmine']
+            },
+            'jasmine-imagediff': {
+                deps: ['jasmine']
+            },
+            'jasmine-stealth': {
+                deps: ['jasmine']
+            },
+            'jasmine.async': {
+                deps: ['jasmine'],
+                exports: 'AsyncSpec'
+            },
+            "sinon": {
+                exports: "sinon"
+            }
+        }
+    });
+
+    define([
+        // Run the common tests that use RequireJS.
+        'common-requirejs/include/common/js/spec/components/paging_spec.js'
+    ]);
+
+}).call(this, requirejs, define);

common/static/js/vendor/requirejs/text.js

@@ -8,10 +8,7 @@
   define, window, process, Packages,
   java, location, Components, FileUtils */
 
-// Added by edX: we namespace requirejs and its associated functions.
-var namespaced_define = window.define !== undefined ? define : RequireJS.define;
-
-namespaced_define(['module'], function (module) {
+var requirejs_text_function = function (module) {
     'use strict';
 
     var text, fs, Cc, Ci, xpcIsWindows,
@@ -210,7 +207,7 @@ namespaced_define(['module'], function (module) {
             if (buildMap.hasOwnProperty(moduleName)) {
                 var content = text.jsEscape(buildMap[moduleName]);
                 write.asModule(pluginName + "!" + moduleName,
-                               "namespaced_define(function () { return '" +
+                               "define(function () { return '" +
                                    content +
                                "';});\n");
             }
@@ -391,4 +388,12 @@ namespaced_define(['module'], function (module) {
         };
     }
     return text;
-});
+};
+
+if (define !== undefined) {
+    define(['module'], requirejs_text_function);
+}
+else {
+    // Added by edX: we namespace requirejs and its associated functions.
+    RequireJS.define(['module'], requirejs_text_function);
+}

common/static/js_test.yml

@@ -82,4 +82,4 @@ spec_paths:
 fixture_paths:
     - js/fixtures
     - js/capa/fixtures
-    - templates/discussion
+    - common/templates

common/static/js_test_requirejs.yml

+---
+# Common JavaScript tests, using RequireJS.
+#
+#
+# To run all the tests and print results to the console:
+#
+#   js-test-tool run TEST_SUITE --use-firefox
+#
+# where `TEST_SUITE` is this file.
+#
+#
+# To run the tests in your default browser ("dev mode"):
+#
+#   js-test-tool dev TEST_SUITE
+#
+
+test_suite_name: common-requirejs
+
+test_runner: jasmine_requirejs
+
+# Path prepended to source files in the coverage report (optional)
+# For example, if the source path
+# is "src/source.js" (relative to this YAML file)
+# and the prepend path is "base/dir"
+# then the coverage report will show
+# "base/dir/src/source.js"
+prepend_path: common/static
+
+# Paths to library JavaScript files (optional)
+lib_paths:
+    - js/vendor/jquery.min.js
+    - js/vendor/jasmine-jquery.js
+    - js/vendor/jasmine-imagediff.js
+    - js/vendor/jquery.truncate.js
+    - js/vendor/underscore-min.js
+    - js/vendor/underscore.string.min.js
+    - js/vendor/backbone-min.js
+    - js/vendor/backbone.paginator.min.js
+    - js/vendor/jquery.timeago.js
+    - js/vendor/URI.min.js
+    - coffee/src/ajax_prefix.js
+    - js/test/add_ajax_prefix.js
+    - js/test/i18n.js
+    - coffee/src/jquery.immediateDescendents.js
+    - js/vendor/requirejs/text.js
+    - js/vendor/sinon-1.7.1.js
+
+# Paths to source JavaScript files
+src_paths:
+    - common/js
+
+# Paths to spec (test) JavaScript files
+spec_paths:
+    - common/js/spec
+    - js/spec/main_requirejs.js
+
+# Paths to fixture files (optional)
+# The fixture path will be set automatically when using jasmine-jquery.
+# (https://github.com/velesin/jasmine-jquery)
+#
+# You can then access fixtures using paths relative to
+# the test suite description:
+#
+#   loadFixtures('path/to/fixture/fixture.html');
+#
+fixture_paths:
+    - common/templates
+
+requirejs:
+  paths:
+    main: js/spec/main_requirejs
+
+# Because require.js is responsible for loading all dependencies, we exclude
+# all files from being included in <script> tags
+exclude_from_page:
+    - .*

common/static/templates/discussion

-../../templates/js/discussion
\ No newline at end of file

lms/envs/common.py

@@ -498,6 +498,7 @@ TEMPLATE_DIRS = [
     COMMON_ROOT / 'templates',
     COMMON_ROOT / 'lib' / 'capa' / 'capa' / 'templates',
     COMMON_ROOT / 'djangoapps' / 'pipeline_mako' / 'templates',
+    COMMON_ROOT / 'static',  # required to statically include common Underscore templates
 ]
 
 TEMPLATE_CONTEXT_PROCESSORS = (
@@ -1571,7 +1572,7 @@ STATICFILES_IGNORE_PATTERNS = (
 
     # Symlinks used by js-test-tool
     "xmodule_js",
-    "common_static",
+    "common",
 )
 
 PIPELINE_UGLIFYJS_BINARY = 'node_modules/.bin/uglifyjs'

lms/static/common

+../../common/static/common
\ No newline at end of file

lms/static/js/common_helpers

-../../../common/static/js/spec_helpers
\ No newline at end of file

lms/static/js/spec/ccx/schedule_spec.js

-define(['js/common_helpers/ajax_helpers', 'js/ccx/schedule'],
+define(['common/js/spec_helpers/ajax_helpers', 'js/ccx/schedule'],
     function(AjaxHelpers) {
         describe("edx.ccx.schedule.ScheduleView", function() {
             var view = null;

lms/static/js/spec/dashboard/donation.js

-define(['js/common_helpers/template_helpers', 'js/common_helpers/ajax_helpers', 'js/dashboard/donation'],
+define(['common/js/spec_helpers/template_helpers', 'common/js/spec_helpers/ajax_helpers', 'js/dashboard/donation'],
     function(TemplateHelpers, AjaxHelpers) {
         'use strict';
 

lms/static/js/spec/discovery/discovery_spec.js

@@ -2,8 +2,8 @@ define([
     'jquery',
     'backbone',
     'logger',
-    'js/common_helpers/ajax_helpers',
-    'js/common_helpers/template_helpers',
+    'common/js/spec_helpers/ajax_helpers',
+    'common/js/spec_helpers/template_helpers',
     'js/discovery/app',
     'js/discovery/collection',
     'js/discovery/form',

lms/static/js/spec/edxnotes/plugins/events_spec.js

 define([
-    'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'js/spec/edxnotes/helpers',
+    'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'js/spec/edxnotes/helpers',
     'annotator_1.2.9', 'logger', 'js/edxnotes/views/notes_factory'
 ], function($, _, AjaxHelpers, Helpers, Annotator, Logger, NotesFactory) {
     'use strict';

lms/static/js/spec/edxnotes/views/note_item_spec.js

 define([
-    'jquery', 'underscore', 'js/common_helpers/ajax_helpers',
-    'js/common_helpers/template_helpers', 'js/spec/edxnotes/helpers', 'logger',
+    'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers',
+    'common/js/spec_helpers/template_helpers', 'js/spec/edxnotes/helpers', 'logger',
     'js/edxnotes/models/note', 'js/edxnotes/views/note_item',
     'js/spec/edxnotes/custom_matchers'
 ], function(

lms/static/js/spec/edxnotes/views/notes_factory_spec.js

 define([
-    'annotator_1.2.9', 'js/edxnotes/views/notes_factory', 'js/common_helpers/ajax_helpers',
+    'annotator_1.2.9', 'js/edxnotes/views/notes_factory', 'common/js/spec_helpers/ajax_helpers',
     'js/spec/edxnotes/helpers', 'js/spec/edxnotes/custom_matchers'
 ], function(Annotator, NotesFactory, AjaxHelpers, Helpers, customMatchers) {
     'use strict';

lms/static/js/spec/edxnotes/views/notes_page_spec.js

 define([
-    'jquery', 'underscore', 'js/common_helpers/template_helpers',
-    'js/common_helpers/ajax_helpers', 'js/spec/edxnotes/helpers',
+    'jquery', 'underscore', 'common/js/spec_helpers/template_helpers',
+    'common/js/spec_helpers/ajax_helpers', 'js/spec/edxnotes/helpers',
     'js/edxnotes/views/page_factory', 'js/spec/edxnotes/custom_matchers'
 ], function($, _, TemplateHelpers, AjaxHelpers, Helpers, NotesFactory, customMatchers) {
     'use strict';

lms/static/js/spec/edxnotes/views/search_box_spec.js

 define([
-    'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'js/edxnotes/views/search_box',
+    'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'js/edxnotes/views/search_box',
     'js/edxnotes/collections/notes', 'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
 ], function($, _, AjaxHelpers, SearchBoxView, NotesCollection, customMatchers) {
     'use strict';

lms/static/js/spec/edxnotes/views/tab_item_spec.js

 define([
-    'jquery', 'js/common_helpers/template_helpers', 'js/edxnotes/collections/tabs',
+    'jquery', 'common/js/spec_helpers/template_helpers', 'js/edxnotes/collections/tabs',
     'js/edxnotes/views/tabs_list', 'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
 ], function($, TemplateHelpers, TabsCollection, TabsListView, customMatchers) {
     'use strict';

lms/static/js/spec/edxnotes/views/tab_view_spec.js

 define([
-    'jquery', 'backbone', 'js/common_helpers/template_helpers', 'js/edxnotes/collections/tabs',
+    'jquery', 'backbone', 'common/js/spec_helpers/template_helpers', 'js/edxnotes/collections/tabs',
     'js/edxnotes/views/tabs_list', 'js/edxnotes/views/tab_view',
     'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
 ], function(

lms/static/js/spec/edxnotes/views/tabs/course_structure_spec.js

 define([
-    'jquery', 'underscore', 'js/common_helpers/template_helpers', 'js/spec/edxnotes/helpers',
+    'jquery', 'underscore', 'common/js/spec_helpers/template_helpers', 'js/spec/edxnotes/helpers',
     'js/edxnotes/collections/notes', 'js/edxnotes/collections/tabs',
     'js/edxnotes/views/tabs/course_structure', 'js/spec/edxnotes/custom_matchers',
     'jasmine-jquery'

lms/static/js/spec/edxnotes/views/tabs/recent_activity_spec.js

 define([
-    'jquery', 'js/common_helpers/template_helpers', 'js/edxnotes/collections/notes',
+    'jquery', 'common/js/spec_helpers/template_helpers', 'js/edxnotes/collections/notes',
     'js/edxnotes/collections/tabs', 'js/edxnotes/views/tabs/recent_activity',
     'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
 ], function(

lms/static/js/spec/edxnotes/views/tabs/search_results_spec.js

 define([
-    'jquery', 'underscore', 'js/common_helpers/template_helpers', 'js/common_helpers/ajax_helpers',
+    'jquery', 'underscore', 'common/js/spec_helpers/template_helpers', 'common/js/spec_helpers/ajax_helpers',
     'logger', 'js/edxnotes/collections/tabs', 'js/edxnotes/views/tabs/search_results',
     'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
 ], function(

lms/static/js/spec/edxnotes/views/tabs/tags_spec.js

 define([
-    'jquery', 'underscore', 'js/common_helpers/template_helpers', 'js/spec/edxnotes/helpers',
+    'jquery', 'underscore', 'common/js/spec_helpers/template_helpers', 'js/spec/edxnotes/helpers',
     'js/edxnotes/collections/notes', 'js/edxnotes/collections/tabs',
     'js/edxnotes/views/tabs/tags', 'js/spec/edxnotes/custom_matchers',
     'jasmine-jquery'

lms/static/js/spec/edxnotes/views/tabs_list_spec.js

 define([
-    'jquery', 'js/common_helpers/template_helpers', 'js/edxnotes/collections/tabs',
+    'jquery', 'common/js/spec_helpers/template_helpers', 'js/edxnotes/collections/tabs',
     'js/edxnotes/views/tabs_list', 'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
 ], function($, TemplateHelpers, TabsCollection, TabsListView, customMatchers) {
     'use strict';

lms/static/js/spec/edxnotes/views/toggle_notes_factory_spec.js

 define([
-    'jquery', 'annotator_1.2.9', 'js/common_helpers/ajax_helpers', 'js/edxnotes/views/visibility_decorator',
+    'jquery', 'annotator_1.2.9', 'common/js/spec_helpers/ajax_helpers', 'js/edxnotes/views/visibility_decorator',
     'js/edxnotes/views/toggle_notes_factory', 'js/spec/edxnotes/helpers',
     'js/spec/edxnotes/custom_matchers', 'jasmine-jquery'
 ], function(

lms/static/js/spec/groups/views/cohorts_spec.js

-define(['backbone', 'jquery', 'js/common_helpers/ajax_helpers', 'js/common_helpers/template_helpers',
+define(['backbone', 'jquery', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
         'js/groups/views/cohorts', 'js/groups/collections/cohort', 'js/groups/models/content_group',
         'js/groups/models/course_cohort_settings', 'js/utils/animation', 'js/vendor/jquery.qubit',
         'js/groups/views/course_cohort_settings_notification', 'js/groups/models/cohort_discussions',

lms/static/js/spec/instructor_dashboard/student_admin_spec.js

-define(['jquery', 'coffee/src/instructor_dashboard/student_admin', 'js/common_helpers/ajax_helpers'],
+define(['jquery', 'coffee/src/instructor_dashboard/student_admin', 'common/js/spec_helpers/ajax_helpers'],
     function ($, StudentAdmin, AjaxHelpers) {
         //'coffee/src/instructor_dashboard/student_admin'
         'use strict';

lms/static/js/spec/search/search_spec.js

@@ -3,7 +3,7 @@ define([
     'sinon',
     'backbone',
     'logger',
-    'js/common_helpers/template_helpers',
+    'common/js/spec_helpers/template_helpers',
     'js/search/base/models/search_result',
     'js/search/base/collections/search_collection',
     'js/search/base/routers/search_router',

lms/static/js/spec/shoppingcart/shoppingcart_spec.js

-define(['js/common_helpers/ajax_helpers', 'js/shoppingcart/shoppingcart'],
+define(['common/js/spec_helpers/ajax_helpers', 'js/shoppingcart/shoppingcart'],
     function(AjaxHelpers) {
         'use strict';
 

lms/static/js/spec/student_account/access_spec.js

 define([
     'jquery',
-    'js/common_helpers/template_helpers',
-    'js/common_helpers/ajax_helpers',
+    'common/js/spec_helpers/template_helpers',
+    'common/js/spec_helpers/ajax_helpers',
     'js/student_account/views/AccessView',
     'js/student_account/views/FormView',
     'js/student_account/enrollment',

lms/static/js/spec/student_account/account_settings_factory_spec.js

-define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'js/common_helpers/template_helpers',
+define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
         'js/spec/views/fields_helpers',
         'js/spec/student_account/helpers',
         'js/spec/student_account/account_settings_fields_helpers',

lms/static/js/spec/student_account/account_settings_fields_helpers.js

-define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'js/common_helpers/template_helpers',
+define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
         'js/spec/views/fields_helpers',
         'string_utils'],
     function (Backbone, $, _, AjaxHelpers, TemplateHelpers, FieldViewsSpecHelpers) {

lms/static/js/spec/student_account/account_settings_fields_spec.js

-define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'js/common_helpers/template_helpers',
+define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
         'js/views/fields',
         'js/spec/views/fields_helpers',
         'js/spec/student_account/account_settings_fields_helpers',

lms/static/js/spec/student_account/account_settings_view_spec.js

-define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'js/common_helpers/template_helpers',
+define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
         'js/spec/student_account/helpers',
         'js/views/fields',
         'js/student_account/models/user_account_model',

lms/static/js/spec/student_account/emailoptin_spec.js

-define(['js/common_helpers/ajax_helpers', 'js/student_account/emailoptin'],
+define(['common/js/spec_helpers/ajax_helpers', 'js/student_account/emailoptin'],
     function( AjaxHelpers, EmailOptInInterface ) {
         'use strict';
 

lms/static/js/spec/student_account/enrollment_spec.js

-define(['js/common_helpers/ajax_helpers', 'js/student_account/enrollment'],
+define(['common/js/spec_helpers/ajax_helpers', 'js/student_account/enrollment'],
     function( AjaxHelpers, EnrollmentInterface ) {
         'use strict';
 

lms/static/js/spec/student_account/login_spec.js

 define([
     'jquery',
     'underscore',
-    'js/common_helpers/template_helpers',
-    'js/common_helpers/ajax_helpers',
+    'common/js/spec_helpers/template_helpers',
+    'common/js/spec_helpers/ajax_helpers',
     'js/student_account/models/LoginModel',
     'js/student_account/views/LoginView',
     'js/student_account/models/PasswordResetModel'

lms/static/js/spec/student_account/password_reset_spec.js

 define([
     'jquery',
     'underscore',
-    'js/common_helpers/template_helpers',
-    'js/common_helpers/ajax_helpers',
+    'common/js/spec_helpers/template_helpers',
+    'common/js/spec_helpers/ajax_helpers',
     'js/student_account/models/PasswordResetModel',
     'js/student_account/views/PasswordResetView',
 ], function($, _, TemplateHelpers, AjaxHelpers, PasswordResetModel, PasswordResetView) {

lms/static/js/spec/student_account/register_spec.js

 define([
     'jquery',
     'underscore',
-    'js/common_helpers/template_helpers',
-    'js/common_helpers/ajax_helpers',
+    'common/js/spec_helpers/template_helpers',
+    'common/js/spec_helpers/ajax_helpers',
     'js/student_account/models/RegisterModel',
     'js/student_account/views/RegisterView'
 ], function($, _, TemplateHelpers, AjaxHelpers, RegisterModel, RegisterView) {

lms/static/js/spec/student_account/shoppingcart_spec.js

-define(['js/common_helpers/ajax_helpers', 'js/student_account/shoppingcart'],
+define(['common/js/spec_helpers/ajax_helpers', 'js/student_account/shoppingcart'],
     function(AjaxHelpers, ShoppingCartInterface) {
         'use strict';
 

lms/static/js/spec/student_profile/learner_profile_factory_spec.js

-define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'js/common_helpers/template_helpers',
+define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
         'js/spec/student_account/helpers',
         'js/spec/student_profile/helpers',
         'js/views/fields',

lms/static/js/spec/student_profile/learner_profile_fields_spec.js

-define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'js/common_helpers/template_helpers',
+define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
         'js/spec/student_account/helpers',
         'js/student_account/models/user_account_model',
         'js/student_profile/views/learner_profile_fields',

lms/static/js/spec/student_profile/learner_profile_view_spec.js

-define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'js/common_helpers/template_helpers',
+define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
         'js/spec/student_account/helpers',
         'js/spec/student_profile/helpers',
         'js/views/fields',

lms/static/js/spec/verify_student/image_input_spec.js

 define([
     'jquery',
     'backbone',
-    'js/common_helpers/template_helpers',
-    'js/common_helpers/ajax_helpers',
+    'common/js/spec_helpers/template_helpers',
+    'common/js/spec_helpers/ajax_helpers',
     'js/verify_student/views/image_input_view',
     'js/verify_student/models/verification_model'
 ], function( $, Backbone, TemplateHelpers, AjaxHelpers, ImageInputView, VerificationModel ) {

lms/static/js/spec/verify_student/make_payment_step_view_spec.js

@@ -2,8 +2,8 @@ define([
         'jquery',
         'underscore',
         'backbone',
-        'js/common_helpers/ajax_helpers',
-        'js/common_helpers/template_helpers',
+        'common/js/spec_helpers/ajax_helpers',
+        'common/js/spec_helpers/template_helpers',
         'js/verify_student/views/make_payment_step_view'
     ],
     function( $, _, Backbone, AjaxHelpers, TemplateHelpers, MakePaymentStepView ) {

lms/static/js/spec/verify_student/pay_and_verify_view_spec.js

-define(['jquery', 'js/common_helpers/template_helpers', 'js/verify_student/views/pay_and_verify_view'],
+define(['jquery', 'common/js/spec_helpers/template_helpers', 'js/verify_student/views/pay_and_verify_view'],
     function( $, TemplateHelpers, PayAndVerifyView ) {
         'use strict';
 

lms/static/js/spec/verify_student/review_photos_step_view_spec.js

@@ -2,8 +2,8 @@ define([
         'jquery',
         'underscore',
         'backbone',
-        'js/common_helpers/ajax_helpers',
-        'js/common_helpers/template_helpers',
+        'common/js/spec_helpers/ajax_helpers',
+        'common/js/spec_helpers/template_helpers',
         'js/verify_student/views/review_photos_step_view',
         'js/verify_student/models/verification_model'
     ],

lms/static/js/spec/verify_student/webcam_photo_view_spec.js

 define([
         'jquery',
         'backbone',
-        'js/common_helpers/template_helpers',
-        'js/common_helpers/ajax_helpers',
+        'common/js/spec_helpers/template_helpers',
+        'common/js/spec_helpers/ajax_helpers',
         'js/verify_student/views/webcam_photo_view',
         'js/verify_student/models/verification_model'
     ],

lms/static/js/spec/views/fields_helpers.js

-define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'js/common_helpers/template_helpers',
+define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
         'js/views/fields',
         'string_utils'],
     function (Backbone, $, _, AjaxHelpers, TemplateHelpers, FieldViews) {

lms/static/js/spec/views/fields_spec.js

-define(['backbone', 'jquery', 'underscore', 'js/common_helpers/ajax_helpers', 'js/common_helpers/template_helpers',
+define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
         'js/views/fields',
         'js/spec/views/fields_helpers',
         'string_utils'],

lms/static/js/spec/views/file_uploader_spec.js

-define(['backbone', 'jquery', 'js/views/file_uploader', 'js/common_helpers/template_helpers',
-        'js/common_helpers/ajax_helpers', 'js/models/notification', 'string_utils'],
+define(['backbone', 'jquery', 'js/views/file_uploader', 'common/js/spec_helpers/template_helpers',
+        'common/js/spec_helpers/ajax_helpers', 'js/models/notification', 'string_utils'],
     function (Backbone, $, FileUploaderView, TemplateHelpers, AjaxHelpers, NotificationModel) {
         describe("FileUploaderView", function () {
             var verifyTitle, verifyInputLabel, verifyInputTip, verifySubmitButton, verifyExtensions, verifyText,

lms/static/js/spec/views/notification_spec.js

-define(['backbone', 'jquery', 'js/models/notification', 'js/views/notification', 'js/common_helpers/template_helpers'],
+define(['backbone', 'jquery', 'js/models/notification', 'js/views/notification', 'common/js/spec_helpers/template_helpers'],
     function (Backbone, $, NotificationModel, NotificationView, TemplateHelpers) {
         describe("NotificationView", function () {
             var createNotification, verifyTitle, verifyMessage, verifyDetails, verifyAction, notificationView;

lms/static/js_test.yml

@@ -64,7 +64,7 @@ lib_paths:
 # Paths to source JavaScript files
 src_paths:
     - js
-    - js/common_helpers
+    - common/js
     - teams/js
 
 # Paths to spec (test) JavaScript files
@@ -97,6 +97,7 @@ fixture_paths:
     - js/fixtures/search
     - templates/search
     - templates/discovery
+    - common/templates
 
 requirejs:
   paths:

lms/templates/courseware/courseware-chromeless.html

@@ -22,7 +22,7 @@ ${page_title_breadcrumbs(course_name())}
 <%block name="header_extras">
 % for template_name in ["image-modal"]:
 <script type="text/template" id="${template_name}-tpl">
-    <%static:include path="js/${template_name}.underscore" />
+    <%static:include path="common/templates/${template_name}.underscore" />
 </script>
 % endfor
 <%

lms/templates/courseware/courseware.html

@@ -22,7 +22,7 @@ ${page_title_breadcrumbs(course_name())}
 <%block name="header_extras">
 % for template_name in ["image-modal"]:
 <script type="text/template" id="${template_name}-tpl">
-    <%static:include path="js/${template_name}.underscore" />
+    <%static:include path="common/templates/${template_name}.underscore" />
 </script>
 % endfor
 

lms/templates/discussion/_underscore_templates.html

@@ -50,7 +50,7 @@ from django_comment_client.permissions import has_permission
 
 % for template_name in ['thread-show']:
 <script aria-hidden="true" type="text/template" id="${template_name}-template">
-    <%static:include path="js/discussion/${template_name}.underscore" />
+    <%static:include path="common/templates/discussion/${template_name}.underscore" />
 </script>
 % endfor
 

lms/templates/studio_render_paged_children_view.html

@@ -2,12 +2,6 @@
 
 <%namespace name='static' file='static_content.html'/>
 
-% for template_name in ["paging-header", "paging-footer"]:
-<script type="text/template" id="${template_name}-tpl">
-    <%static:include path="js/${template_name}.underscore" />
-</script>
-% endfor
-
 <div class="xblock-container-paging-parameters"
      data-start="${first_displayed}"
      data-displayed="${displayed_children}"

pavelib/utils/envs.py

@@ -109,6 +109,7 @@ class Env(object):
         REPO_ROOT / 'cms/static/js_test_squire.yml',
         REPO_ROOT / 'common/lib/xmodule/xmodule/js/js_test.yml',
         REPO_ROOT / 'common/static/js_test.yml',
+        REPO_ROOT / 'common/static/js_test_requirejs.yml',
     ]
 
     JS_TEST_ID_KEYS = [
@@ -118,6 +119,7 @@ class Env(object):
         'cms-squire',
         'xmodule',
         'common',
+        'common-requirejs'
     ]
 
     JS_REPORT_DIR = REPORT_DIR / 'javascript'