Remove pageBeforeAnimation handler from router and...

+ Remove pageBeforeAnimation handler from router
+ Router and controllers refactoring (move code from controller.render
to controller.init)
+ Move fixStickySearchResults method from listController to listView

README.md

@@ -23,7 +23,7 @@ It's used for RequireJs and Framework7 initial configuration.
 Also it starts application routing.
 
 Router has two methods:
-+ ```Router.start()``` - starts routing - handle Framework7 page events - pageBeforeInit and pageBeforeAnimation.
++ ```Router.init()``` - initialize routing - handle Framework7 page events - pageBeforeInit and pageBeforeAnimation.
 More about Framework7 page events here:
 http://www.idangero.us/framework7/docs/pages.html#page-events
 

app.js

@@ -11,7 +11,7 @@ require.config({
     }
 });
 define('app', ['js/router', 'js/utils'], function(Router, Utils) {
-	Router.start();
+	Router.init();
 	var f7 = new Framework7({
 		modalTitle: 'Contacts7',
 		swipePanel: 'left',

contact.html

@@ -1,6 +1,6 @@
 <div class="navbar">
     <div class="navbar-inner">
-        <div class="left sliding">
+        <div class="left sliding contact-back-link">
             <a href="#" class="back link">
 				<i class="icon icon-back-white"></i>
 				<span>Back</span>

js/contact/contactController.js

@@ -5,16 +5,17 @@ define(["app","js/contact/contactView", "js/contactModel"], function(app, Contac
 		element: '.contact-edit-link',
 		event: 'click',
 		handler: runEditMode
+	}, {
+		element: '.contact-back-link',
+		event: 'click',
+		handler: goBack
 	}];
 
 	function init(query){
 		var contacts = JSON.parse(localStorage.getItem("f7Contacts"));
 		if (query && query.id) {
 			contact = new Contact(_.find(contacts, { id: query.id }));
 		}
-	}
-
-	function render() {
 		ContactView.render({
 			model: contact,
 			bindings: bindings
@@ -25,8 +26,11 @@ define(["app","js/contact/contactView", "js/contactModel"], function(app, Contac
 		app.router.load('contactEdit', {id: contact.id });
 	}
 
+	function goBack() {
+		app.router.load('list');
+	}
+
 	return {
-		init: init,
-		render: render
+		init: init
 	};
 });

js/contactEdit/contactEditController.js

@@ -20,9 +20,6 @@ define(["app", "js/contactModel", "js/contactEdit/contactEditView"], function(ap
 			contact = new Contact({ isFavorite: query.isFavorite });
 			state.isNew = true;
 		}
-	}
-
-	function render() {
 		View.render({ model: contact, bindings: bindings, state: state, doneCallback: saveContact });
 	}
 
@@ -69,7 +66,6 @@ define(["app", "js/contactModel", "js/contactEdit/contactEditView"], function(ap
 	}
 
 	return {
-		init: init,
-		render: render
+		init: init
 	};
 });

js/list/listController.js

@@ -16,18 +16,14 @@ define(["app", "js/contactModel","js/list/listView"], function(app, Contact, Lis
 		element: '.list-panel-favorites',
 		event: 'click',
 		handler: showFavorites
-	}, {
-		element: '.contacts-list',
-		event: 'search',
-		handler: fixStickySearchResults
 	}
 	];
 
 	var state = {
 		isFavorite: false
 	};
 
-    function render() {
+    function init() {
 		var contacts = loadContacts();
 		ListView.render({
 			bindings: bindings,
@@ -63,23 +59,6 @@ define(["app", "js/contactModel","js/list/listView"], function(app, Contact, Lis
 		return contacts;
 	}
 
-	function fixStickySearchResults(e) {
-        Framework7.$('.contacts-list .list-group-title').each(function() {
-            var title = Framework7.$(this);
-            var nextElements = title.nextAll('li');
-            var hide = true;
-            for (var i = 0; i < nextElements.length; i++) {
-                var nextEl = Framework7.$(nextElements[i]);
-                if (nextEl.hasClass('list-group-title')) break;
-                if (nextEl.css('display') !== 'none') {
-                    hide = false;
-                }
-            }
-            if (hide) title.hide();
-            else title.css('display', '');
-        });
-    }
-
 	function tempInitializeStorage() {
 		var contacts = [
 			new Contact({ "firstName": "Alex", "lastName": "Black", "company": "Global Think", "phone": "+380631234561", "email": "ainene@umail.com", "city": "London", isFavorite: true }),
@@ -112,6 +91,6 @@ define(["app", "js/contactModel","js/list/listView"], function(app, Contact, Lis
 	}
 
     return {
-        render: render
+        init: init
     };
 });

js/list/listView.js

@@ -17,6 +17,24 @@ define(['hbs!js/list/contact-list-item'], function(template) {
 		for (var i in bindings) {
 			$(bindings[i].element).on(bindings[i].event, bindings[i].handler);
 		}
+		$('.contacts-list').on('search', fixStickySearchResults);
+	}
+
+	function fixStickySearchResults(e) {
+		$('.contacts-list .list-group-title').each(function() {
+			var title = Framework7.$(this);
+			var nextElements = title.nextAll('li');
+			var hide = true;
+			for (var i = 0; i < nextElements.length; i++) {
+				var nextEl = $(nextElements[i]);
+				if (nextEl.hasClass('list-group-title')) break;
+				if (nextEl.css('display') !== 'none') {
+					hide = false;
+				}
+			}
+			if (hide) title.hide();
+			else title.css('display', '');
+		});
 	}
 
     return {

js/router.js

@@ -2,45 +2,28 @@ define(function() {
 	var $ = Framework7.$;
 
 	/**
-	 * Starts router, that handle page events
+	 * Init router, that handle page events
 	 */
-    function start() {
+    function init() {
 		$(document).on('pageBeforeInit', function (e) {
 			var page = e.detail.page;
-			_require(page.name, function(controller) {
-				if (controller.init) {
-					controller.init(page.query);
-				}
-			});
-		});
-		$(document).on('pageBeforeAnimation', function (e) {
-			var page = e.detail.page;
-			_require(page.name, function(controller) {
-				controller.render(page.query);
-			});
+			load(page.name, page.query);
 		});
     }
 
 	/**
-	 * Loads controller from js code (another controller) - call it's init and render functions
+	 * Load (or reload) controller from js code (another controller) - call it's init function
 	 * @param controllerName
 	 * @param query
 	 */
 	function load(controllerName, query) {
-		_require(controllerName, function(controller) {
-			if (controller.init) {
-				controller.init(query);
-			}
-			controller.render(query);
+		require(['js/' + controllerName + '/'+ controllerName + 'Controller'], function(controller) {
+			controller.init(query);
 		});
 	}
 
-	function _require(controllerName, callback) {
-		require(['js/' + controllerName + '/'+ controllerName + 'Controller'], callback);
-	}
-
-    return {
-        start: start,
+	return {
+        init: init,
 		load: load
     };
 });