Permalink
Browse files

added non-jQuery specific implementation

  • Loading branch information...
1 parent 1951e15 commit 83d7ee34194943d18a40c36185d76438e3e20480 @trevnorris committed Apr 19, 2012
Showing with 102 additions and 20 deletions.
  1. +27 −20 README.md
  2. +70 −0 src/jqml.js
  3. +5 −0 src/jqml.min.js
View
@@ -1,9 +1,16 @@
-jqml - jQuery JsonML Translator
+jqml - jQuery/JavaScript JsonML Translator
-The library is included in the `src/` directory in full and minified forms.
-Figured I should include some code examples, so here it goes:
+In `src/` you will find the following files:
-To create a new element as a jQuery object just pass in the JsonML.
+* jqml.js - Create DOM from JsonML, requires no additional libraries.
+* jqml.min.js - Minified jqml.js.
+* jquery.jqml.js - jqml implementation specific to jQuery.
+* jquery.jqml.min.js - Minified jquery.jqml.js.
+
+Below are examples of how to use the two libraries.
+The only syntactical difference is that one uses `jQuery.jqml()` and the other uses `jqml()`.
+
+To create a new element just pass in the JsonML.
```javascript
$.jqml([ 'div', {
@@ -12,21 +19,7 @@ $.jqml([ 'div', {
}, [ 'p' ]]);
```
-One thing I like about my little plugin is that it ties into the jQuery event model.
-So you can attach events to the elements you're creating as they're being created.
-Then easily attach the element to something else.
-
-```javascript
-$.jqml([ 'nav', [ 'a', {
- 'href' : '#link',
- 'click' : function( e ) {
- e.preventDefault();
- // do more stuff
- }
-}]]).prependTo( 'body' );
-```
-
-Also say you need to create a template that prints table rows based on data received from the server.
+Say you need to create a template that prints table rows based on data received from the server.
Well, just create an immediately executing anonymous function in the JsonML for a quick little template.
```javascript
@@ -40,6 +33,7 @@ $.jqml([ 'table', (function( data ) {
```
While passing an array of elements isn't technically correct JsonML, it makes for much easier templating.
+**Note:** This only works for the jQuery implementation.
```javascript
$.jqml([ 'div', (function( strings ) {
@@ -54,6 +48,19 @@ $.jqml([ 'div', (function( strings ) {
}([ 'hi', 'yall!' ]))]);
```
+The jQuery plugin also ties into the the jQuery event model.
+So you can attach events to the elements as they're being created.
+
+```javascript
+$.jqml([ 'nav', [ 'a', {
+ 'href' : '#link',
+ 'click' : function( e ) {
+ e.preventDefault();
+ // do more stuff
+ }
+}]]).prependTo( 'body' );
+```
+
If you have a problem, post an issue.
-The plugin is super light weight, under 1K minified, so troubleshooting shouldn't be too hard.
+The plugins are super light weight, under 1K minified, so troubleshooting shouldn't be too hard.
And let me know if you have any features/improvements you'd like to see.
View
@@ -0,0 +1,70 @@
+/* jqml - jQuery-free JsonML Utility
+ * Author: Trevor Norris
+ * This document is licensed as free software under the terms of the
+ * MIT License: http://www.opensource.org/licenses/mit-license.php */
+
+(function( document, global ) {
+
+var toString = Object.prototype.toString,
+
+ // set element attributes
+ // check for IE specific functionality and set function accordingly
+ setEleAttr = document.documentElement.style.setAttribute ? function( args, iTem ) {
+ var aKey;
+ // loop through and apply attributes
+ for ( aKey in args ) {
+ // check if aKey is 'style' attribute
+ if ( aKey != 'style' ) {
+ iTem.setAttribute( aKey, args[ aKey ]);
+ } else {
+ // technique from http://www.kadimi.com/en/setattribute-getattribute-315
+ iTem.style.setAttribute( 'cssText', args[ aKey ]);
+ }
+ }
+ return iTem;
+ } : function( args, iTem ) {
+ var aKey;
+ // loop through and apply attributes
+ for ( aKey in args ) {
+ iTem.setAttribute( aKey, args[ aKey ]);
+ }
+ return iTem;
+ };
+
+// Check if string or number
+function isStringy( arg ) {
+ var tmp = typeof arg;
+ return tmp === 'string' || tmp === 'number';
+}
+
+// Check if array
+function isArray( arg ) {
+ return toString.call( arg ) === '[object Array]';
+}
+
+// main function
+function jqml( elems ) {
+ // create/set element
+ var node = elems[ 0 ].nodeType ? elems[ 0 ] : document.createElement( elems[ 0 ]),
+ i = 1;
+ // loop though passed arguments
+ for ( ; i < elems.length; i++ ) {
+ // check if string or number
+ isStringy( elems[ i ])
+ ? node.appendChild( document.createTextNode( elems[ i ]))
+ // check if argument is array
+ : isArray( elems[ i ])
+ ? node.appendChild( jqml( elems[ i ]))
+ // check if DOM element
+ : elems[ i ].nodeType
+ ? node.appendChild( elems[ i ])
+ // set element attributes
+ : setEleAttr( elems[ i ], node );
+ }
+ return node;
+};
+
+// expose jqml
+global.jqml = jqml;
+
+}( document, this ));
View
@@ -0,0 +1,5 @@
+/* jqml - jQuery-free JsonML Utility
+ * Author: Trevor Norris
+ * This document is licensed as free software under the terms of the
+ * MIT License: http://www.opensource.org/licenses/mit-license.php */
+(function(a,d){var f=Object.prototype.toString,c=a.documentElement.style.setAttribute?function(i,h){var j;for(j in i){if(j!="style"){h.setAttribute(j,i[j])}else{h.style.setAttribute("cssText",i[j])}}return h}:function(i,h){var j;for(j in i){h.setAttribute(j,i[j])}return h};function e(h){var i=typeof h;return i==="string"||i==="number"}function b(h){return f.call(h)==="[object Array]"}function g(h){var k=h[0].nodeType?h[0]:a.createElement(h[0]),j=1;for(;j<h.length;j++){e(h[j])?k.appendChild(a.createTextNode(h[j])):b(h[j])?k.appendChild(g(h[j])):h[j].nodeType?k.appendChild(h[j]):c(h[j],k)}return k}d.jqml=g}(document,this));

0 comments on commit 83d7ee3

Please sign in to comment.