UI components are initialized using the corresponding jQuery element

Author: tekool

bin/puremvc-typescript-employeeadmin-1.0-min.js

@@ -510,7 +510,7 @@ if( typeof define === "function" )
             "use strict";
             var UserList = (function (_super) {
                 __extends(UserList, _super);
-                function UserList(selector) {
+                function UserList(view) {
                         _super.call(this);
                     this.userListPanel = null;
                     this.userList = null;
@@ -519,7 +519,7 @@ if( typeof define === "function" )
                     this.selectedUser = null;
                     this.userTotal = null;
                     this.users = null;
-                    this.userListPanel = jQuery(selector);
+                    this.userListPanel = view;
                     this.initializeChildren();
                     this.bindListeners();
                 }
@@ -738,7 +738,7 @@ if( typeof define === "function" )
             "use strict";
             var UserForm = (function (_super) {
                 __extends(UserForm, _super);
-                function UserForm(selector) {
+                function UserForm(view) {
                         _super.call(this);
                     this.userFormPanel = null;
                     this.uname = null;
@@ -754,7 +754,7 @@ if( typeof define === "function" )
                     this.user = null;
                     this.userRoles = null;
                     this.mode = null;
-                    this.userFormPanel = jQuery(selector);
+                    this.userFormPanel = view;
                     this.initializeChildren();
                     this.bindListeners();
                     this.clearForm();
@@ -945,7 +945,7 @@ if( typeof define === "function" )
                     } else {
                         this.setFieldError("department", false);
                     }
-                    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
+                    var emailReg = /^[a-z0-9!#$%&'*+\/=?^_`\{|\}~\.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*$/;
                     if(this.email.val() != "" && !emailReg.test(this.email.val())) {
                         this.setFieldError("email", error = true);
                     } else {
@@ -1081,7 +1081,7 @@ if( typeof define === "function" )
             "use strict";
             var RolePanel = (function (_super) {
                 __extends(RolePanel, _super);
-                function RolePanel(selector) {
+                function RolePanel(view) {
                         _super.call(this);
                     this.user = null;
                     this.userRoles = null;
@@ -1093,7 +1093,7 @@ if( typeof define === "function" )
                     this.addRoleButton = null;
                     this.removeRoleButton = null;
                     this.selectedFullname = null;
-                    this.rolePanel = jQuery(selector);
+                    this.rolePanel = view;
                     this.initializeChildren();
                     this.bindListeners();
                     this.fillRoleList();
@@ -1378,9 +1378,10 @@ if( typeof define === "function" )
 
                 }
                 PrepViewCommand.prototype.execute = function (note) {
-                    var userForm = new EmployeeAdmin.UserForm(".user-form-panel");
-                    var userList = new EmployeeAdmin.UserList(".user-list-panel");
-                    var rolePanel = new EmployeeAdmin.RolePanel(".role-panel");
+                    var mainView = note.getBody();
+                    var userForm = new EmployeeAdmin.UserForm(mainView.find(".user-form-panel"));
+                    var userList = new EmployeeAdmin.UserList(mainView.find(".user-list-panel"));
+                    var rolePanel = new EmployeeAdmin.RolePanel(mainView.find(".role-panel"));
                     var userListMediator = new EmployeeAdmin.UserListMediator(EmployeeAdmin.MediatorNames.USER_LIST_MEDIATOR, userList);
                     var userFormMediator = new EmployeeAdmin.UserFormMediator(EmployeeAdmin.MediatorNames.USER_FORM_MEDIATOR, userForm);
                     var rolePanelMediator = new EmployeeAdmin.RolePanelMediator(EmployeeAdmin.MediatorNames.ROLE_PANEL_MEDIATOR, rolePanel);

bin/puremvc-typescript-employeeadmin-1.0.js

@@ -1,4 +1,5 @@
 ///<reference path='../../lib/puremvc/puremvc-typescript-standard-1.0.d.ts'/>
+///<reference path='../../lib/jquery/jquery-1.7.x-jqueryui-1.8.x.d.ts'/>
 
 ///<reference path='../abc/MediatorNames.ts'/>
 
@@ -25,12 +26,14 @@ module EmployeeAdmin
 		 */
 		execute( note:puremvc.INotification )
 		{
+			var mainView:JQuery = note.getBody();
+
 			/*
-			 * View Components initialization
+			 * View Components are initialized using the application main view selector
 			 */
-			var userForm:UserForm = new UserForm(".user-form-panel");
-			var userList:UserList = new UserList(".user-list-panel");
-			var rolePanel:RolePanel = new RolePanel(".role-panel");
+			var userForm:UserForm = new UserForm( mainView.find(".user-form-panel") );
+			var userList:UserList = new UserList( mainView.find(".user-list-panel") );
+			var rolePanel:RolePanel = new RolePanel( mainView.find(".role-panel") );
 
 			/*
 			 * Mediators initialization

src/controller/PrepViewCommand.ts

@@ -69,14 +69,14 @@ module EmployeeAdmin
 		/**
 		 * Constructs a <code>RolePanel</code> instance.
 		 *
-		 * @param selector
-		 * 		The jQuery selector giving access to the UI component instance in the page.
+		 * @param view
+		 * 		The jQuery element giving access to the corresponding UI HTML element in the page.
 		 */
-		constructor( selector:string )
+		constructor( view:JQuery )
 		{
 			super();
 
-			this.rolePanel = jQuery(selector);
+			this.rolePanel = view;
 
 			this.initializeChildren();
 			this.bindListeners();

src/view/components/RolePanel.ts

@@ -90,14 +90,14 @@ module EmployeeAdmin
 		/**
 		 * Constructs a <code>UserForm</code> instance.
 		 *
-		 * @param selector
-		 * 		The jQuery selector giving access to the UI component instance in the page.
+		 * @param view
+		 * 		The jQuery element giving access to the corresponding UI HTML element in the page.
 		 */
-		constructor( selector:string )
+		constructor( view:JQuery )
 		{
 			super();
 
-			this.userFormPanel = jQuery(selector);
+			this.userFormPanel = view;
 
 			this.initializeChildren();
 			this.bindListeners();
@@ -406,7 +406,11 @@ module EmployeeAdmin
 			else
 				this.setFieldError( "department", false );
 
-			var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
+			/**
+			 * The e-mail verification rule is the one used by HTML5 e-mail inputs.
+			 * @see http://stackoverflow.com/questions/7786058/find-the-regex-used-by-html5-forms-for-validation
+			 */
+			var emailReg:RegExp = /^[a-z0-9!#$%&'*+\/=?^_`\{|\}~\.-]+@[a-z0-9-]+(\.[a-z0-9-]+)*$/;
 			if( this.email.val() != "" && !emailReg.test(this.email.val()) )
 				this.setFieldError( "email", error = true );
 			else

src/view/components/UserForm.ts

@@ -53,14 +53,14 @@ module EmployeeAdmin
 		/**
 		 * Constructs a <code>UserList</code> instance.
 		 *
-		 * @param selector
-		 * 		The jQuery selector giving access to the UI component instance in the page.
+		 * @param view
+		 * 		The jQuery element giving access to the corresponding UI HTML element in the page.
 		 */
-		constructor( selector:string )
+		constructor( view:JQuery )
 		{
 			super();
 
-			this.userListPanel = jQuery(selector);
+			this.userListPanel = view;
 
 			this.initializeChildren();
 			this.bindListeners();