Comparing version 0.0.5 to 0.0.6
@@ -26,2 +26,3 @@ // Copyright Satoshi Nakajima (@snakajima) | ||
var _listners = {}; | ||
var _extension = {}; | ||
@@ -77,3 +78,3 @@ function _escape(text) { | ||
function _process_action(action, id) { | ||
if (action.cmd && typeof _dispatch[action.cmd] == 'function') { | ||
if (action.cmd) { | ||
if (id) { | ||
@@ -86,3 +87,7 @@ if (action.params.params) { | ||
} | ||
_dispatch[action.cmd](action.params); | ||
if (typeof _dispatch[action.cmd] == 'function') { | ||
_dispatch[action.cmd](action.params); | ||
} else if (typeof _extension[action.cmd] == 'function') { | ||
_extension[action.cmd](action.params); | ||
} | ||
} | ||
@@ -150,8 +155,2 @@ } | ||
window.location.href = params.url; | ||
}, | ||
show: function(params) { | ||
$(params.selector).show(); | ||
}, | ||
hide: function(params) { | ||
$(params.selector).hide(); | ||
} | ||
@@ -161,5 +160,2 @@ }; | ||
return { | ||
setTemplate: function(template) { | ||
_template = template; | ||
}, | ||
context: function(params) { | ||
@@ -171,4 +167,7 @@ return new Context(params); | ||
return this; | ||
}, | ||
extend: function(extension) { | ||
$.extend(_extension, extension); | ||
} | ||
}; // end of "return" | ||
})(); // end of "var ajmax=" |
@@ -32,2 +32,13 @@ $(document).ready(function() { | ||
// Application specific commands | ||
AJ.extend({ | ||
show: function(params) { | ||
$(params.selector).show(); | ||
}, | ||
hide: function(params) { | ||
$(params.selector).hide(); | ||
} | ||
}); | ||
// Application specific events | ||
AJ.on('load', function(ctx) { | ||
@@ -34,0 +45,0 @@ ctx.deferred(); |
@@ -26,2 +26,3 @@ // Copyright Satoshi Nakajima (@snakajima) | ||
var _listners = {}; | ||
var _extension = {}; | ||
@@ -77,3 +78,3 @@ function _escape(text) { | ||
function _process_action(action, id) { | ||
if (action.cmd && typeof _dispatch[action.cmd] == 'function') { | ||
if (action.cmd) { | ||
if (id) { | ||
@@ -86,3 +87,7 @@ if (action.params.params) { | ||
} | ||
_dispatch[action.cmd](action.params); | ||
if (typeof _dispatch[action.cmd] == 'function') { | ||
_dispatch[action.cmd](action.params); | ||
} else if (typeof _extension[action.cmd] == 'function') { | ||
_extension[action.cmd](action.params); | ||
} | ||
} | ||
@@ -150,8 +155,2 @@ } | ||
window.location.href = params.url; | ||
}, | ||
show: function(params) { | ||
$(params.selector).show(); | ||
}, | ||
hide: function(params) { | ||
$(params.selector).hide(); | ||
} | ||
@@ -161,5 +160,2 @@ }; | ||
return { | ||
setTemplate: function(template) { | ||
_template = template; | ||
}, | ||
context: function(params) { | ||
@@ -171,4 +167,7 @@ return new Context(params); | ||
return this; | ||
}, | ||
extend: function(extension) { | ||
$.extend(_extension, extension); | ||
} | ||
}; // end of "return" | ||
})(); // end of "var ajmax=" |
@@ -32,2 +32,13 @@ $(document).ready(function() { | ||
// Application specific commands | ||
AJ.extend({ | ||
show: function(params) { | ||
$(params.selector).show(); | ||
}, | ||
hide: function(params) { | ||
$(params.selector).hide(); | ||
} | ||
}); | ||
// Application specific events | ||
AJ.on('load_facebook', function(ctx) { | ||
@@ -34,0 +45,0 @@ (function(d) { |
@@ -26,2 +26,3 @@ // Copyright Satoshi Nakajima (@snakajima) | ||
var _listners = {}; | ||
var _extension = {}; | ||
@@ -77,3 +78,3 @@ function _escape(text) { | ||
function _process_action(action, id) { | ||
if (action.cmd && typeof _dispatch[action.cmd] == 'function') { | ||
if (action.cmd) { | ||
if (id) { | ||
@@ -86,3 +87,7 @@ if (action.params.params) { | ||
} | ||
_dispatch[action.cmd](action.params); | ||
if (typeof _dispatch[action.cmd] == 'function') { | ||
_dispatch[action.cmd](action.params); | ||
} else if (typeof _extension[action.cmd] == 'function') { | ||
_extension[action.cmd](action.params); | ||
} | ||
} | ||
@@ -150,8 +155,2 @@ } | ||
window.location.href = params.url; | ||
}, | ||
show: function(params) { | ||
$(params.selector).show(); | ||
}, | ||
hide: function(params) { | ||
$(params.selector).hide(); | ||
} | ||
@@ -161,5 +160,2 @@ }; | ||
return { | ||
setTemplate: function(template) { | ||
_template = template; | ||
}, | ||
context: function(params) { | ||
@@ -171,4 +167,7 @@ return new Context(params); | ||
return this; | ||
}, | ||
extend: function(extension) { | ||
$.extend(_extension, extension); | ||
} | ||
}; // end of "return" | ||
})(); // end of "var ajmax=" |
{ | ||
"name": "ajmax", | ||
"version": "0.0.5", | ||
"version": "0.0.6", | ||
"description": "micro MVC framework for single-page AJAX/html5 apps", | ||
@@ -5,0 +5,0 @@ "main": "./lib/ajmax.js", |
@@ -11,3 +11,3 @@ AJMax | ||
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). | ||
It 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. | ||
@@ -21,7 +21,7 @@ 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. | ||
FB.api('/me', { fields:'name' }, function(data) { | ||
FB.api('/me', { fields:'name' }, function(result) { | ||
ctx.exec({ cmd:'html', params:{ data:result, template:'hello', selector:'#message' }}); | ||
}); | ||
If the 'data' is { name:"John Smith" } and the template 'hello' is "\<p>Hello, {{name}}!\</p>", this instruction will generate | ||
If the 'result' is { name:"John Smith" } and the template 'hello' is "\<p>Hello, {{name}}!\</p>", this instruction will generate | ||
@@ -34,5 +34,5 @@ "<p>Hello, John Smith!</p>" | ||
Since this instruction is written in JSON (not in JavaScript), it allows the server to send it to the client and modify the DOM remotely (or even describes the behaviors remotely). | ||
Since this instruction is written in JSON (not in JavaScript), it allows the server to send it to the client and modify the DOM remotely. | ||
Description of various behaviors in DBI is also possible. For example, | ||
It is also possible to describe the UI behaviors by binding DBIs to UI-event. For example, | ||
@@ -58,4 +58,4 @@ FB.api('/me/friends', function(result) { | ||
3. then, find all the DOM element specified by the selector '.friends', and bind the 'click' event with actions described in (4) and (5) | ||
4. hide the DOM element specified by the selector '#contents' (executed as the result of 'click' event) | ||
5. emit the event 'friend_selected' to the client-side of JavaScript (execute as the result of 'click' event) | ||
4. hide the DOM element specified by the selector '#contents' (extended command) | ||
5. emit the event 'friend_selected' to the client-side of JavaScript | ||
@@ -93,9 +93,10 @@ Flexibility | ||
API (client side) | ||
----------------- | ||
API (client side, ajmaxc.js) | ||
---------------------------- | ||
When ajmaxc.js is loaded, it create a AJMax object on the global variable AJ. It has only three methods: | ||
When ajmaxc.js is loaded, it create a AJMax object and assign it to the global variable AJ. It has two methods: | ||
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 | ||
3. extend(extension) - add application specific command extensions (to be executed by UBI) | ||
@@ -105,7 +106,21 @@ Context object has one method and a property. | ||
1. exec(dbi) - execute the data-bind istruction(s) | ||
2. params - parameters to the event | ||
2. params - parameters to the event, which is specified when the event has emitted via DBI | ||
API (server side) | ||
Command Extension | ||
----------------- | ||
Command extension is a set of command-name, function pairs. The example below adds 'show' and 'hide' commands. | ||
AJ.extend({ | ||
show: function(params) { | ||
$(params.selector).show(); | ||
}, | ||
hide: function(params) { | ||
$(params.selector).hide(); | ||
} | ||
}); | ||
API (server side, ajmax.js) | ||
--------------------------- | ||
The node module ajmax has one exported method | ||
@@ -115,7 +130,7 @@ | ||
The Server object has only one method | ||
The Server object has one method | ||
1. serve(request, response) - checks if the request is a AJMax event and emits it if necessary and return true. Otherwise it returns false. | ||
1. 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. | ||
The Server object is an EventEmitter and emit events (application specific). | ||
The Server object is an EventEmitter and emit events. Events are all application specific. | ||
@@ -129,3 +144,3 @@ DBI syntax | ||
The value of 'cmd' property (command) must be one of 'html', 'emit', 'hide', 'show', 'alert' (this is not extensible at this point, but may change later). | ||
The 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). | ||
@@ -150,5 +165,2 @@ The meaning of 'params' property depends on the command. | ||
'show', 'hide' -- show/hide the specified DOM element(s) | ||
'selector': jQuery selector (required) | ||
'alert' - display the browser alert | ||
@@ -161,3 +173,3 @@ 'data': data object to be bound with the specified template (optional) | ||
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. | ||
A UI-Binding instruction (optional property of DBI 'html' command) bind DBI instructions to UI events, and has following properties. | ||
@@ -169,2 +181,1 @@ 'selector': specifies the JQuery selector (required, scope is the target element of the parent 'html' command) | ||
422832
1449
171