ajmax - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

example_c/static/lib/ajmaxc.js

@@ -22,2 +22,4 @@ // Copyright Satoshi Nakajima (@snakajima)
 
+'use strict';
+
 var AJ = (function() {
@@ -66,3 +68,3 @@ var _template = {}; // templates
         var rowset = [];
-        for (var i in params.data) {
+        for (var i=0, len=params.data.length; i < len; i++) {
           rowset.push(apply(params.data[i], i));
@@ -78,11 +80,11 @@ }
   
-  function _process_action(action, id) {
+  function _process_action(action, id, form) {
     if (action.cmd) {
-      if (id) {
-        if (action.params.params) {
-          action.params.params.id = id;
-        } else {
-          action.params.params = { id: id };
-        }
+      if (!action.params.params) {
+        action.params.params = {};
       }
+      if (id) { // Note: this if statement is required
+        action.params.params.id = id;
+      }
+      $.extend(action.params.params, form);
       if (typeof _dispatch[action.cmd] == 'function') {
@@ -96,9 +98,9 @@ _dispatch[action.cmd](action.params);
   
-  function _process_payload(payload, id) {
+  function _process_payload(payload, id, form) {
     if ($.isArray(payload)) {
-      for (i in payload) {
-        _process_action(payload[i], id);
+      for (var i=0, len=payload.length; i < len; i++) {
+        _process_action(payload[i], id, form);
       }
-    } else {
-      _process_action(payload, id);
+    } else if (payload) {
+      _process_action(payload, id, form);
     }
@@ -126,2 +128,6 @@ };
     },
+    clear: function(params) {
+      var $element = $(params.selector);
+      $element.val('');
+    },
     html: function(params) {
@@ -131,8 +137,25 @@ var $element = $(params.selector);
       if (params.bindings) {
-        for (var i in params.bindings) {
-          var item = params.bindings[i];
-          $(item.selector, $element).bind(item.on ? item.on : 'click', function() {
-            _process_payload(item.actions, this.id);
-            return false;
-          });
+        for (var i=0, len=params.bindings.length; i<len; i++) {
+          (function() {
+            var item = params.bindings[i];
+            var event = item.on || 'click';
+            $(item.selector, $element).bind(event, function() {
+              var form = null;
+              if (item.on == 'submit') {
+                form = {};
+                var array = $(this).serializeArray();
+                for (var i=0, len=array.length; i<len; i++) {
+                  var entry = array[i];
+                  form[entry.name] = entry.value;
+                }
+              } else {
+                form = { value:$(this).val() };
+              }
+              
+              _process_payload(item.actions, this.id, form);
+              if (event == 'click' || event=='submit') {
+                return false;
+              }
+            });
+          })();
         }
@@ -139,0 +162,0 @@ }

example_s/static/lib/ajmaxc.js

@@ -22,2 +22,4 @@ // Copyright Satoshi Nakajima (@snakajima)
 
+'use strict';
+
 var AJ = (function() {
@@ -66,3 +68,3 @@ var _template = {}; // templates
         var rowset = [];
-        for (var i in params.data) {
+        for (var i=0, len=params.data.length; i < len; i++) {
           rowset.push(apply(params.data[i], i));
@@ -78,11 +80,11 @@ }
   
-  function _process_action(action, id) {
+  function _process_action(action, id, form) {
     if (action.cmd) {
-      if (id) {
-        if (action.params.params) {
-          action.params.params.id = id;
-        } else {
-          action.params.params = { id: id };
-        }
+      if (!action.params.params) {
+        action.params.params = {};
       }
+      if (id) { // Note: this if statement is required
+        action.params.params.id = id;
+      }
+      $.extend(action.params.params, form);
       if (typeof _dispatch[action.cmd] == 'function') {
@@ -96,9 +98,9 @@ _dispatch[action.cmd](action.params);
   
-  function _process_payload(payload, id) {
+  function _process_payload(payload, id, form) {
     if ($.isArray(payload)) {
-      for (i in payload) {
-        _process_action(payload[i], id);
+      for (var i=0, len=payload.length; i < len; i++) {
+        _process_action(payload[i], id, form);
       }
-    } else {
-      _process_action(payload, id);
+    } else if (payload) {
+      _process_action(payload, id, form);
     }
@@ -126,2 +128,6 @@ };
     },
+    clear: function(params) {
+      var $element = $(params.selector);
+      $element.val('');
+    },
     html: function(params) {
@@ -131,8 +137,25 @@ var $element = $(params.selector);
       if (params.bindings) {
-        for (var i in params.bindings) {
-          var item = params.bindings[i];
-          $(item.selector, $element).bind(item.on ? item.on : 'click', function() {
-            _process_payload(item.actions, this.id);
-            return false;
-          });
+        for (var i=0, len=params.bindings.length; i<len; i++) {
+          (function() {
+            var item = params.bindings[i];
+            var event = item.on || 'click';
+            $(item.selector, $element).bind(event, function() {
+              var form = null;
+              if (item.on == 'submit') {
+                form = {};
+                var array = $(this).serializeArray();
+                for (var i=0, len=array.length; i<len; i++) {
+                  var entry = array[i];
+                  form[entry.name] = entry.value;
+                }
+              } else {
+                form = { value:$(this).val() };
+              }
+              
+              _process_payload(item.actions, this.id, form);
+              if (event == 'click' || event=='submit') {
+                return false;
+              }
+            });
+          })();
         }
@@ -139,0 +162,0 @@ }

lib/ajmaxc.js

@@ -22,2 +22,4 @@ // Copyright Satoshi Nakajima (@snakajima)
 
+'use strict';
+
 var AJ = (function() {
@@ -66,3 +68,3 @@ var _template = {}; // templates
         var rowset = [];
-        for (var i in params.data) {
+        for (var i=0, len=params.data.length; i < len; i++) {
           rowset.push(apply(params.data[i], i));
@@ -78,11 +80,11 @@ }
   
-  function _process_action(action, id) {
+  function _process_action(action, id, form) {
     if (action.cmd) {
-      if (id) {
-        if (action.params.params) {
-          action.params.params.id = id;
-        } else {
-          action.params.params = { id: id };
-        }
+      if (!action.params.params) {
+        action.params.params = {};
       }
+      if (id) { // Note: this if statement is required
+        action.params.params.id = id;
+      }
+      $.extend(action.params.params, form);
       if (typeof _dispatch[action.cmd] == 'function') {
@@ -96,9 +98,9 @@ _dispatch[action.cmd](action.params);
   
-  function _process_payload(payload, id) {
+  function _process_payload(payload, id, form) {
     if ($.isArray(payload)) {
-      for (i in payload) {
-        _process_action(payload[i], id);
+      for (var i=0, len=payload.length; i < len; i++) {
+        _process_action(payload[i], id, form);
       }
-    } else {
-      _process_action(payload, id);
+    } else if (payload) {
+      _process_action(payload, id, form);
     }
@@ -126,2 +128,6 @@ };
     },
+    clear: function(params) {
+      var $element = $(params.selector);
+      $element.val('');
+    },
     html: function(params) {
@@ -131,8 +137,25 @@ var $element = $(params.selector);
       if (params.bindings) {
-        for (var i in params.bindings) {
-          var item = params.bindings[i];
-          $(item.selector, $element).bind(item.on ? item.on : 'click', function() {
-            _process_payload(item.actions, this.id);
-            return false;
-          });
+        for (var i=0, len=params.bindings.length; i<len; i++) {
+          (function() {
+            var item = params.bindings[i];
+            var event = item.on || 'click';
+            $(item.selector, $element).bind(event, function() {
+              var form = null;
+              if (item.on == 'submit') {
+                form = {};
+                var array = $(this).serializeArray();
+                for (var i=0, len=array.length; i<len; i++) {
+                  var entry = array[i];
+                  form[entry.name] = entry.value;
+                }
+              } else {
+                form = { value:$(this).val() };
+              }
+              
+              _process_payload(item.actions, this.id, form);
+              if (event == 'click' || event=='submit') {
+                return false;
+              }
+            });
+          })();
         }
@@ -139,0 +162,0 @@ }

package.json

 {
   "name": "ajmax",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "micro MVC framework for single-page AJAX/html5 apps",
   "main": "./lib/ajmax.js",
-  "dependencies": {},
+  "dependencies": {
+  },
   "devDependencies": {},
@@ -11,3 +12,6 @@ "scripts": {
   },
-  "repository": "",
+  "repository": {
+    "type": "git",
+    "url": "http://github.com/snakajima/AJMax.js.git"
+  },
   "keywords": [
@@ -19,14 +23,8 @@ "ajax",
     "framework",
-    "server",
+    "code-on-demand",
     "event-driven",
     "jquery"
   ],
-  "author": {
-    "name": "Satoshi Nakajima",
-    "email": "[e-mail]"
-  },
-  "license": "MIT",
-  "readme": "AJMax\n=====\n\nAJMax is a micro MVC framework, which simplifies the development of one-page Ajax/HTML5 applications with node.js.\n\nIt has a light-weight HTML-template engine, which performs data-binding on the client side very efficiently.\n\nIt effectively enforces MVC architecture, where Model is JSON-based REST API, View is HTML templates,\nand Controller is written in JavaScript and/or JSON, running either on the client side or the server side (or both).\n\nIt allows developers to describe data-binding instructions (DBI) and UI-binding instructions (UBI) in JSON instead of JavaScript, which simplifies the development, and also makes it possible to describe those instructions on the server side and send them to the client to be executed.\n\nIn other words, AJMax finally enables the \"code-on-demand\" (the holy grail of REST defined by Roy T. Fielding. http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm#sec_5_1_7) without sending raw JavaScript code from the server to the client.  \n\nData-binding Instructions (DBI)\n-------------------------------\n\nFor example, the following code (which runs either on the client side or the server side) fetches the JSON data that describes 'me' using Facebook Graph API, and binds it with the HTML template named 'hello', and inserts the generated HTML at the location specified by the JQuery selector '#message'.\n\n    FB.api('/me', { fields:'name' }, function(result) {\n      ctx.exec({ cmd:'html', params:{ data:result, template:'hello', selector:'#message' }});\n    });\n\nIf the 'result' is { name:\"John Smith\" } and the template 'hello' is \"\\<p>Hello, {{name}}!\\</p>\", this instruction will generate\n\n    \"<p>Hello, John Smith!</p>\"\n\nand set it as the innerHTML of the DOM element specified by '#message'. It effectively performs\n\n    $('#message').html(\"<p>Hello, John Smith!</p>\");\n\nSince this instruction is written in JSON (not in JavaScript), it allows the server to send it to the client and modify the DOM remotely.\n\nIt is also possible to describe the UI behaviors by binding DBIs to UI-event. For example, \n\n    FB.api('/me/friends', function(result) {\n      ctx.exec([\n        { cmd:'html', params:{ template:'friends', selector:'#contents' }}, // (1)\n        { cmd:'html', params:{ data:result.data, template:'friend', selector:'#friends', // (2)\n          bindings:[\n            { selector:'.friend', on:'click', actions:[ // (3)\n              { cmd:'hide', params: { selector:'#contents' } }, // (4)\n              { cmd:'emit', params: { event:'friend_selected', target:'client' } } // (5)\n            ]}\n          ]}\n        }\n      ]);\n    });\n\nwill fetch the list of Facebook friends of the current user, then perform following actions.\n\n1. insert the HTML template named 'friends' at the DOM element specified by the selector '#contents' (no data binding)\n2. bind the list of friends (result.data) with the HTML template named 'friend', and insert it at the DOM element specified by the selector '#friends'\n3. then, find all the DOM element specified by the selector '.friends', and bind the 'click' event with actions described in (4) and (5)\n4. hide the DOM element specified by the selector '#contents' (extended command)\n5. emit the event 'friend_selected' to the client-side of JavaScript\n\nFlexibility\n-----------\n\nBecause of this symmetry (the data binding instruction are portable across server and client) gives maximum flexibility to the developer. It enables three variation of MVC architectures.\n\n1. Server is a pure REST API server (Model), and all controlloing logics (Controller) are written on the client side. \n2. Along with the REST API (Model), all the controlling logics (Controller) are described on the server side, and the client simply interprets those instructions sent from the server side, and route appropriate events (such as 'click' events) back to the server.\n3. Controlling logics that involves data access are written on the server side, but the rest of controlling logics (mostly pure UI behaviors) are written on the client side. \n\nTemplate Mechanism\n------------------\n\nTemplate is a JSON object, which is a dictionary of HTML-templates. For example, \n\n    {\n      morning: \"<p>Good morning, {{name}}!</p>\",\n      evening: \"<p>Good evening, {{name}}!</p>\"\n    }\n    \nhas two templates, \"morning\" and \"evening\". \n\nThe template machanism has only three rules.\n\n1. {{foo}} will be replaced by the value of property \"foo\" (escaped)\n2. {{{foo}}} will be replaced by the value of property \"foo\" (unescaped)\n3. {{$index}} will be replaced by the index of the row (when the data object is an array)\n\nWhen a template is applied to an array of objects, the template will be applied to each object in the array and the results wil be concatinated.\n\nThe template needs to be loaded by executing DBI command 'template'.\n\nAPI (client side, ajmaxc.js)\n----------------------------\n\nWhen ajmaxc.js is loaded, it create a AJMax object and assign it to the global variable AJ. It has two methods:\n\n1. on(event, callback) - specify the event listner (callback function receives a Context object as the only parameter)\n2. context() - create a new Context object\n3. extend(extension) - add application specific command extensions (to be executed by UBI)\n\nContext object has one method and a property. \n\n1. exec(dbi) - execute the data-bind istruction(s)\n2. params - parameters to the event, which is specified when the event has emitted via DBI\n\nCommand Extension\n-----------------\n\nCommand extension is a set of command-name, function pairs. The example below adds 'show' and 'hide' commands.\n\n    AJ.extend({\n      show: function(params) {\n        $(params.selector).show();\n      },\n      hide: function(params) {\n        $(params.selector).hide();\n      }\n    });\n\nAPI (server side, ajmax.js)\n---------------------------\n\nThe node module ajmax has one exported method\n\n1. createServer() - it creates a Server object and returns it\n\nThe Server object has one method\n\n1. serve(request, response) - checks if the request is a AJMax event and emits an event if it is and return true. Otherwise, it returns false.\n\nThe Server object is an EventEmitter and emit events. Events are all application specific.\n\nDBI syntax\n----------\n\nDBI is either an DBI object or an array of DBI objects.\n\nDBI object must have 'cmd' property and 'params' property.\n\nThe value of 'cmd' property (command) must be one of 'html', 'template', 'emit', 'alert' or one of application specific commands specified in the command extension (specified by calling AJ.extend() method).\n\nThe meaning of 'params' property depends on the command.\n\n    'html' -- data-bind the data object with the specified view template and insert it at the specified DOM element\n      'data': data object to be bound with the specified template (optional)\n      'template': the name of template (required)\n      'selector': jQuery selector (required)\n      'bindings': UI binding instructions (optional)\n      \n    'template' -- load a template set from the specified URL and merge them into the current set\n      'url': the URL to load the template from (required)\n      'event': the event name needs to be emitted after loading the template (required)\n      'target': 'client' or 'server' (optional, the default is 'server')\n\n    'emit' -- emit an event\n      'event': name of the event (required)\n      'target': 'client' or 'server' (optional, the default is 'server')\n      'params': event parameters (optional)\n      \n    'alert' - display the browser alert\n      'data': data object to be bound with the specified template (optional)\n      'template': the name of template (required)\n\nUBI syntax\n----------\n\nA UI-Binding instruction (optional property of DBI 'html' command) bind DBI instructions to UI events, and has following properties.\n\n    'selector': specifies the JQuery selector (required, scope is the target element of the parent 'html' command)\n    'on': specifies the event (optional, the default is 'click')\n    'actions' : specifies DBIs to be executed when the specified event happens (required)\n    \n\n",
-  "_id": "ajmax@0.0.6",
-  "_from": "ajmax"
+  "author": "Satoshi Nakajima <[e-mail]>",
+  "license": "MIT"
 }

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Lines of code

1513

increased by4.34%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

425530

decreased by-1.32%

No dependency changes