Merge pull request #217 from edx/nickersoft/cat-backbone

Added backbone view for course list view

ecommerce/static/js/config.js

@@ -9,7 +9,8 @@ require.config({
         jquery: 'bower_components/jquery/dist/jquery',
         'jquery-cookie': 'bower_components/jquery-cookie/jquery.cookie',
         requirejs: 'bower_components/requirejs/require',
-        underscore: 'bower_components/underscore/underscore'
+        underscore: 'bower_components/underscore/underscore',
+        views: 'js/views'
     },
     shim: {
         bootstrap: {

ecommerce/static/js/pages/course_details_page.js

+require([
+        'views/course_list_view'
+    ],
+    function (CourseListView) {
+
+        return new CourseListView();
+
+    }
+);

ecommerce/static/js/views/course_list_view.js

-require(['jquery', 'dataTablesBootstrap'], function ($) {
-    $(document).ready(function () {
+define([
+        'jquery',
+        'underscore',
+        'backbone',
+        'dataTablesBootstrap'
+      ],
+      function ($, _, Backbone) {
 
+        'use strict';
 
-        var filter_placeholder = gettext('Filter by org or course ID'),
-            $empty_label = $('<label>').addClass('sr-only').html(filter_placeholder);
+        return Backbone.View.extend({
 
-        $('#courseTable').DataTable({
-            "info": false,
-            "paging": false,
-            "oLanguage": {
-                "sSearch": ''
-            }
-        });
+            el: '#course-list-view',
+
+            initialize: function () {
+                this.render();
+            },
+
+            render: function () {
+
+                var filterPlaceholder = gettext('Filter by org or course ID'),
+                    $emptyLabel = '<label class="sr">' + filterPlaceholder + '</label>';
 
-        $('#courseTable_filter label').prepend($empty_label);
+                this.$el.find('#courseTable').DataTable({
+                    info: false,
+                    paging: false,
+                    oLanguage: {
+                        sSearch: ''
+                    }
+                });
 
-        $('#courseTable_filter input')
-            .attr('placeholder', filter_placeholder)
-            .addClass('field-input input-text')
-            .removeClass('form-control input-sm');
-    });
-});
+                this.$el.find('#courseTable_filter label').prepend($emptyLabel);
+
+                this.$el.find('#courseTable_filter input')
+                    .attr('placeholder', filterPlaceholder)
+                    .addClass('field-input input-text')
+                    .removeClass('form-control input-sm');
+
+                return this;
+            }
+
+        });
+    }
+);

ecommerce/static/sass/base/_base.scss

@@ -15,3 +15,7 @@ a {
 .container {
     background-color: white;
 }
+
+.sr {
+   @extend .sr-only;
+}

ecommerce/templates/courses/course_list.html

@@ -5,7 +5,7 @@
 {% block title %}{% trans "Courses" %}{% endblock %}
 
 {% block content %}
-    <div class="container">
+    <div class="container" id="course-list-view">
         <div class="page-header">
             <h1 class="hd-1 emphasized">
               {% trans "Courses" %}
@@ -39,5 +39,5 @@
 {% endblock %}
 
 {% block javascript %}
-    <script src="{% static 'js/views/course_list_view.js' %}"></script>
+    <script src="{% static 'js/pages/course_details_page.js' %}"></script>
 {% endblock %}