ajmax - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

example_c/static/lib/ajmaxc.js

@@ -37,3 +37,7 @@ // Copyright Satoshi Nakajima (@snakajima)
     if (!_compiled[key]) {
-      var _script =  '"' + _template[key].replace(/\"/g, "'")
+      var t = _template[key];
+      if ($.isArray(t)) {
+        t = t.join('');
+      }
+      var _script =  '"' + t.replace(/\"/g, "'")
                         .replace(/[\r\n]/g, " ")
@@ -53,2 +57,6 @@ .replace(/{{$index}}/g, '"+index+"')
       ret = _template[params.template];
+      if ($.isArray(ret)) {
+        ret = ret.join('');
+        _template[params.template] = ret;
+      }
     } else {
@@ -105,2 +113,8 @@ var apply = _get_template_function(params.template);
   var _dispatch = {
+    template: function(params) {
+      $.getJSON(params.url, {}, function(data) {
+        $.extend(_template, data);
+        _dispatch.emit(params);
+      });
+    },
     html: function(params) {
@@ -107,0 +121,0 @@ var $element = $(params.selector);

example_c/static/lib/main.js

@@ -60,11 +60,13 @@ $(document).ready(function() {
     );
+  }).on('load_facebook', function(ctx) {
+    (function(d) {
+        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
+        if (d.getElementById(id)) {return;}
+        js = d.createElement('script'); js.id = id; js.async = true;
+        js.src = "//connect.facebook.net/en_US/all.js";
+        ref.parentNode.insertBefore(js, ref);
+    }(document));
+  });
+
+  AJ.context().exec({ cmd:'template', params: { url:'/lib/templates.js', event:'load_facebook', target:'client' }});
 });
-  
-  (function(d) {
-      var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
-      if (d.getElementById(id)) {return;}
-      js = d.createElement('script'); js.id = id; js.async = true;
-      js.src = "//connect.facebook.net/en_US/all.js";
-      ref.parentNode.insertBefore(js, ref);
-  }(document));
-});

example_c/static/lib/templates.js

@@ -1,32 +0,29 @@
-AJ.setTemplate({
-  initializing:
+{
+  "initializing":
     "<h1>Initializing...</h1>",
-  login_required:
-    "<h1>Authentication is required</h1> \
-     <p><input id='login' type='button' value='Login' /></p>",
-  authenticating:
-    "<h1>Authenticating</h1> \
-     <p>accessing the server...</p>",
-  authenticated:
-    "<h1 id='message'>Authenticated</h1> \
-     <div id='contents'>contacting Facebook server...</div>",
-  loading_friends:
+  "login_required": [
+    "<h1>Authentication is required</h1>",
+    "<p><input id='login' type='button' value='Login' /></p>" ],
+  "authenticating": [
+    "<h1>Authenticating</h1>",
+    "<p>accessing the server...</p>"],
+  "authenticated": [
+    "<h1 id='message'>Authenticated</h1>",
+    "<div id='contents'>contacting Facebook server...</div>"],
+  "loading_friends":
     "<p>fetching friend list...</p>",
 
-  morning: "Good morning, {{name}}!",
-  evening: "Good evening, {{name}}!",
-  hello: "Hello, {{name}}!",
+  "morning": "Good morning, {{name}}!",
+  "evening": "Good evening, {{name}}!",
+  "hello": "Hello, {{name}}!",
 
-  friends:
+  "friends":
     "<ul id='friends'></ul>",
-  friend:
-    "<li>\
-       <img style='width:24px' src='http://graph.facebook.com/{{id}}/picture'>\
-       <a class='friend' id='{{id}}' href='#'> \
-       <span style='padding:2px'>{{name}}</span> \
-       </a>\
-    </li>",
-
-  test_alert: "Selected {{name}}",
-  _last_item_for_ie6_: "" // no trailing comma
-});
+  "friend":[
+    "<li>",
+    "  <img style='width:24px' src='http://graph.facebook.com/{{id}}/picture'>",
+    "  <a class='friend' id='{{id}}' href='#'>",
+    "  <span style='padding:2px'>{{name}}</span>",
+    "  </a>",
+    "</li>"]
+}

example_s/static/lib/ajmaxc.js

@@ -37,3 +37,7 @@ // Copyright Satoshi Nakajima (@snakajima)
     if (!_compiled[key]) {
-      var _script =  '"' + _template[key].replace(/\"/g, "'")
+      var t = _template[key];
+      if ($.isArray(t)) {
+        t = t.join('');
+      }
+      var _script =  '"' + t.replace(/\"/g, "'")
                         .replace(/[\r\n]/g, " ")
@@ -53,2 +57,6 @@ .replace(/{{$index}}/g, '"+index+"')
       ret = _template[params.template];
+      if ($.isArray(ret)) {
+        ret = ret.join('');
+        _template[params.template] = ret;
+      }
     } else {
@@ -105,2 +113,8 @@ var apply = _get_template_function(params.template);
   var _dispatch = {
+    template: function(params) {
+      $.getJSON(params.url, {}, function(data) {
+        $.extend(_template, data);
+        _dispatch.emit(params);
+      });
+    },
     html: function(params) {
@@ -107,0 +121,0 @@ var $element = $(params.selector);

example_s/static/lib/main.js

@@ -32,9 +32,13 @@ $(document).ready(function() {
   
-  (function(d) {
-      var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
-      if (d.getElementById(id)) {return;}
-      js = d.createElement('script'); js.id = id; js.async = true;
-      js.src = "//connect.facebook.net/en_US/all.js";
-      ref.parentNode.insertBefore(js, ref);
-  }(document));
+  AJ.on('load_facebook', function(ctx) {
+    (function(d) {
+        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
+        if (d.getElementById(id)) {return;}
+        js = d.createElement('script'); js.id = id; js.async = true;
+        js.src = "//connect.facebook.net/en_US/all.js";
+        ref.parentNode.insertBefore(js, ref);
+    }(document));
+  });
+
+  AJ.context().exec({ cmd:'template', params: { url:'/lib/templates.js', event:'load_facebook', target:'client' }});
 });

example_s/static/lib/templates.js

@@ -1,32 +0,29 @@
-AJ.setTemplate({
-  initializing:
+{
+  "initializing":
     "<h1>Initializing...</h1>",
-  login_required:
-    "<h1>Authentication is required</h1> \
-     <p><input id='login' type='button' value='Login' /></p>",
-  authenticating:
-    "<h1>Authenticating</h1> \
-     <p>accessing the server...</p>",
-  authenticated:
-    "<h1 id='message'>Authenticated</h1> \
-     <div id='contents'>contacting Facebook server...</div>",
-  loading_friends:
+  "login_required": [
+    "<h1>Authentication is required</h1>",
+    "<p><input id='login' type='button' value='Login' /></p>" ],
+  "authenticating": [
+    "<h1>Authenticating</h1>",
+    "<p>accessing the server...</p>"],
+  "authenticated": [
+    "<h1 id='message'>Authenticated</h1>",
+    "<div id='contents'>contacting Facebook server...</div>"],
+  "loading_friends":
     "<p>fetching friend list...</p>",
 
-  morning: "Good morning, {{name}}!",
-  evening: "Good evening, {{name}}!",
-  hello: "Hello, {{name}}!",
+  "morning": "Good morning, {{name}}!",
+  "evening": "Good evening, {{name}}!",
+  "hello": "Hello, {{name}}!",
 
-  friends:
+  "friends":
     "<ul id='friends'></ul>",
-  friend:
-    "<li>\
-       <img style='width:24px' src='http://graph.facebook.com/{{id}}/picture'>\
-       <a class='friend' id='{{id}}' href='#'> \
-       <span style='padding:2px'>{{name}}</span> \
-       </a>\
-    </li>",
-
-  test_alert: "Selected {{name}}",
-  _last_item_for_ie6_: "" // no trailing comma
-});
+  "friend":[
+    "<li>",
+    "  <img style='width:24px' src='http://graph.facebook.com/{{id}}/picture'>",
+    "  <a class='friend' id='{{id}}' href='#'>",
+    "  <span style='padding:2px'>{{name}}</span>",
+    "  </a>",
+    "</li>"]
+}

lib/ajmaxc.js

@@ -37,3 +37,7 @@ // Copyright Satoshi Nakajima (@snakajima)
     if (!_compiled[key]) {
-      var _script =  '"' + _template[key].replace(/\"/g, "'")
+      var t = _template[key];
+      if ($.isArray(t)) {
+        t = t.join('');
+      }
+      var _script =  '"' + t.replace(/\"/g, "'")
                         .replace(/[\r\n]/g, " ")
@@ -53,2 +57,6 @@ .replace(/{{$index}}/g, '"+index+"')
       ret = _template[params.template];
+      if ($.isArray(ret)) {
+        ret = ret.join('');
+        _template[params.template] = ret;
+      }
     } else {
@@ -105,2 +113,8 @@ var apply = _get_template_function(params.template);
   var _dispatch = {
+    template: function(params) {
+      $.getJSON(params.url, {}, function(data) {
+        $.extend(_template, data);
+        _dispatch.emit(params);
+      });
+    },
     html: function(params) {
@@ -107,0 +121,0 @@ var $element = $(params.selector);

package.json

 {
   "name": "ajmax",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "micro MVC framework for single-page AJAX/html5 apps",
@@ -5,0 +5,0 @@ "main": "./lib/ajmax.js",

README.md

 AJMax
 =====
 
-AJMax is a micro-framework, which simplifies the development of one-page Ajax applications with node.js.
+AJMax is a micro MVC framework, which simplifies the development of one-page Ajax/HTML5 applications with node.js.
 
@@ -11,4 +11,6 @@ It has a light-weight HTML-template engine, which performs data-binding on the client side very efficiently.
 
-It allows developers to describe data-binding instructions (and controll behaviors) in JSON instead of JavaScriptz, 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 (remote data-binding and DOM manipulation).
+It allows developers to describe data-binding instructions (DBI) and UI-binding instructions (UBI) in JSON instead of JavaScriptz, 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 (remote data-binding, DOM manipulation and UI-binding).
 
+In 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.  
+
 Data-binding Instructions (DBI)
@@ -86,3 +88,3 @@ -------------------------------
 
-The templates needs to be specified by calling AJ.setTemplate() method on the client side (this may change in the later release). 
+The template needs to be loaded by executing DBI command 'template'.
 
@@ -94,5 +96,4 @@ API (client side)
 
-1. setTemplate(object) - specifies the set of templates
-2. on(event, callback) - specify the event listner (callback function receives a Context object as the only parameter)
-3. context() - create a new Context object
+1. on(event, callback) - specify the event listner (callback function receives a Context object as the only parameter)
+2. context() - create a new Context object
 
@@ -133,2 +134,7 @@ Context object has one method and a property.
       'bindings': UI binding instructions (optional)
+      
+    'template' -- load a template set from the specified URL and merge them into the current set
+      'url': the URL to load the template from (required)
+      'event': the event name needs to be emitted after loading the template (required)
+      'target': 'client' or 'server' (optional, the default is 'server')
 
@@ -147,5 +153,8 @@ 'emit' -- emit an event
 
-UI-Binding instructions (optional property of 'html' command) allows the application to bind DBI instructions to UI events. It is an array of UI-binding instructions (UBI). UBI has following properties.
+UBI syntax
+----------
 
-    'selector': specifies the JQuery selector (required)
+UI-Binding instructions (optional property of DBI 'html' command) allows the application to bind DBI instructions to UI events. It is an array of UI-binding instructions (UBI), each of which has following properties.
+
+    'selector': specifies the JQuery selector (required, scope is the target element of the parent 'html' command)
     'on': specifies the event (optional, the default is 'click')
@@ -152,0 +161,0 @@ 'actions' : specifies DBIs to be executed when the specified event happens (required)

No alert changes

Improved metrics

Total package byte prevSize

422065

increased by0.41%

Lines of code

1432

increased by3.1%

Number of lines in readme file

160

increased by5.96%

No dependency changes