[backbone] Refactor myhome

media/scripts/app/collections/repos.js

@@ -10,7 +10,7 @@ define([
         url: app.pageOptions.reposUrl,
 
         initialize: function() {
-            console.log('init RepoCollection');
+            //console.log('init RepoCollection');
         },
 
         fetch: function(options) {
@@ -24,5 +24,5 @@ define([
 
     });
 
-    return new RepoCollection();
+    return RepoCollection;
 });

media/scripts/app/views/add-repo.js

@@ -15,10 +15,9 @@ define([
             "click #encrypt-switch": "togglePasswdInput"
         },
 
-        initialize: function() {
-            this.listenTo(Repos, 'invalid', this.displayValidationErrors);
-
-            this.render();
+        initialize: function(repos) {
+            this.repos = repos;
+            this.listenTo(repos, 'invalid', this.displayValidationErrors);
         },
 
         render: function() {
@@ -42,16 +41,17 @@ define([
             this.$('.error').html(error).show();
             $("#simplemodal-container").css({'height':'auto'});
         },
-        
+
         addRepo: function(e) {
             e.preventDefault();
 
-            Repos.create(this.newAttributes(), {
+            this.repos.create(this.newAttributes(), {
                 wait: true,
                 validate: true,
                 prepend: true,  // show newly created repo at first line
                 success: function() {
-                    Common.feedback('Success', 'success', Common.SUCCESS_TIMEOUT);
+                    // No need to show feedback
+                    // Common.feedback('Success', 'success', Common.SUCCESS_TIMEOUT);
                 },
                 error: function(xhr, textStatus, errorThrown) {
                     // TODO: handle error gracefully

media/scripts/app/views/dir.js

@@ -5,7 +5,7 @@ define([
     'common',
     'file-tree',
     'app/collections/dirents',
-    'app/views/dirents',
+    'app/views/dirent',
     'text!' + app.config._tmplRoot + 'dir-op-bar.html',
     'text!' + app.config._tmplRoot + 'path-bar.html',
     ], function($, _, Backbone, Common, FileTree, DirentCollection, DirentView,

media/scripts/app/views/myhome-repos.js

@@ -0,0 +1,83 @@
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common',
+    'app/collections/repos',
+    'app/views/repo',
+    'app/views/add-repo',
+], function($, _, Backbone, Common, RepoCollection, RepoView, AddRepoView) {
+    'use strict';
+
+    var ReposView = Backbone.View.extend({
+        el: $('#repo-tabs'),
+
+        events: {
+            'click #repo-create': 'createRepo',
+        },
+
+        initialize: function(options) {
+            this.$tabs = $('#repo-tabs');
+            this.$table = this.$('#my-own-repos table');
+            this.$tableHead = $('thead', this.$table);
+            this.$tableBody = $('tbody', this.$table);
+            this.$loadingTip = $('.loading-tip', this.$tabs);
+            this.$emptyTip = $('.empty-tips', this.tabs);
+
+            this.repos = new RepoCollection();
+            this.listenTo(this.repos, 'add', this.addOne);
+            this.listenTo(this.repos, 'reset', this.reset);
+        },
+
+        addOne: function(repo, collection, options) {
+            var view = new RepoView({model: repo});
+            if (options.prepend) {
+                this.$tableBody.prepend(view.render().el);
+            } else {
+                this.$tableBody.append(view.render().el);
+            }
+        },
+
+        reset: function() {
+            this.$tableBody.empty();
+            this.repos.each(this.addOne, this);
+            if (this.repos.length) {
+                this.$emptyTip.hide();
+                this.$table.show();
+            } else {
+                this.$emptyTip.show();
+                this.$table.hide();
+            }
+            this.$loadingTip.hide();
+        },
+
+        renderPath: function() {
+            //
+        },
+
+        showMyRepos: function() {
+            this.repos.fetch({reset: true});
+            this.$tabs.show();
+            //this.$table.parent().show();
+            this.$table.hide();
+            this.$loadingTip.show();
+        },
+
+        show: function() {
+            this.showMyRepos();
+        },
+
+        hide: function() {
+            this.$el.hide();
+        },
+
+        createRepo: function() {
+            var dialog = new AddRepoView(this.repos);
+            dialog.render();
+        },
+
+
+    });
+
+    return ReposView;
+});

media/scripts/app/views/myhome.js

@@ -3,52 +3,31 @@ define([
     'underscore',
     'backbone',
     'common',
-    'app/collections/repos',
-    'app/collections/dirents',
     'app/collections/groups',
-    'app/views/repos',
-    'app/views/dirents',
+    'app/views/myhome-repos',
     'app/views/dir',
     'app/views/group-nav',
-    'app/views/add-repo'
-], function($, _, Backbone, Common, Repos, DirentCollection, GroupCollection,
-        RepoView, DirentView, DirView, GroupNavView, AddRepoView) {
+], function($, _, Backbone, Common, GroupCollection,
+        ReposView, DirView, GroupNavView) {
     'use strict';
 
     var MyHomeView = Backbone.View.extend({
         el: '#main',
 
-        events: {
-            'click #repo-create': 'createRepo',
-        },
-
         initialize: function() {
             console.log('init MyHomePage');
             Common.prepareApiCsrf();
 
-            _.bindAll(this, 'ajaxLoadingShow', 'ajaxLoadingHide');
-            this.$el.ajaxStart(this.ajaxLoadingShow).ajaxStop(this.ajaxLoadingHide);
+            //_.bindAll(this, 'ajaxLoadingShow', 'ajaxLoadingHide');
+            //this.$el.ajaxStart(this.ajaxLoadingShow).ajaxStop(this.ajaxLoadingHide);
 
-            // this.on('showDirents', this.showDirents, this);
-            this.initializeRepos();
-
-            this.$repoTabs = this.$('#repo-tabs');
             this.$cont = this.$('#right-panel');
-            this.$table = this.$('#my-own-repos table');
-            this.$tableHead = $('thead', this.$table);
-            this.$tableBody = $('tbody', this.$table);
 
+            this.reposView = new ReposView();
             this.dirView = new DirView();
-
             this.groupView = new GroupNavView();
         },
 
-        initializeRepos: function() {
-            this.listenTo(Repos, 'add', this.addOne);
-            this.listenTo(Repos, 'reset', this.addAll);
-            // this.listenTo(Repos, 'sync', this.render);
-            this.listenTo(Repos, 'all', this.render);
-        },
 
         ajaxLoadingShow: function() {
             Common.feedback('Loading...', 'info', Common.INFO_TIMEOUT);
@@ -58,29 +37,6 @@ define([
             $('.messages .info').hide();
         },
 
-        addOne: function(repo, collection, options) {
-            console.log('add repo: ' + repo.get('name'));
-            var view = new RepoView({model: repo});
-            if (options.prepend) {
-                this.$tableBody.prepend(view.render().el);
-            } else {
-                this.$tableBody.append(view.render().el);
-            }
-        },
-
-        addAll: function() {
-            this.$tableBody.empty();
-            Repos.each(this.addOne, this);
-        },
-
-        hideTable: function() {
-            this.$table.hide();
-        },
-
-        showTable: function() {
-            this.$table.show();
-        },
-
         hideLoading: function() {
             this.$cont.find('.loading').hide();
         },
@@ -89,51 +45,23 @@ define([
             this.$cont.find('.loading').show();
         },
 
-        hideEmptyTips: function() {
-            this.$cont.find('.empty-tips').hide();
-        },
-
-        showEmptyTips: function() {
-            this.$cont.find('.empty-tips').show();
-        },
-        
-        render: function(eventName) {
-            console.log('render repos with event: ' + eventName);
-
-            this.$repoTabs.show();
-            this.$table.parent().show();
-            this.hideLoading();
-            
-            if (Repos.length) {
-                this.hideEmptyTips();
-                this.showTable();
-            } else {
-                this.showEmptyTips();
-                this.hideTable();
-            }
-        },
-
         showRepoList: function() {
             console.log('show repo list');
-            Repos.fetch({reset: true});
-
+            this.reposView.show();
             this.dirView.hide();
         },
 
         showDir: function(repo_id, path) {
             console.log('show dir ' + repo_id + ' ' + path);
-            this.$repoTabs.hide();
 
             var path = path || '/';
+            this.reposView.hide();
             this.dirView.showDir(repo_id, path);
             // this.dirent_list = new app.DirentListView({id: id, path: path});
             // $('#my-own-repos table').children().remove();
             // $('#my-own-repos table').append(this.dirent_list.render().el);
         },
 
-        createRepo: function() {
-            new AddRepoView();
-        }
 
     });