035 : rendAr

examples.js

//----------:A simple example:----------
var template = [
  'ul.listClass#listId', [
    'li[text=Hello]',
    'li[text=World]'
  ]
];
var element = template.rendAr();
$$('body').adopt(element);

//----------:On the fly:----------
$$('body').adopt(([
  'ul.listClass#listId', [
    'li[text=Hello]',
    'li[text=World]'
  ]
]).rendAr());

//----------:Setting styles & events:----------
var template = [
  'ul.listClass#listId', [
    'li[text=Hello]',
    'li[text=World]'
  ],
  'div.button[text=Click Me]', {
      styles: {
        backgroundColor: '#323288'
      },
      events: {
        click: function() { console.log('Hello World'); }
      }
  },
];
$$('body').adopt(template.rendAr());

//----------:Dynamic Templates:----------
//Easy.. just pass a function which return's the template you require:
var template = function(foobar) { return [
  'ul.listClass#listId', 
    [
    'li[text=Hello]',
    'li[text=' + foobar + ']'
    ]
  ];
};
$$('body').adopt(template('World').rendAr());

//----------:Nested Templates:----------
//No problem.. remember your just dealing with an array structure - juggle it how you like:

//if your 'inner' template looks like this:
var template = [
  'li[text=Hello]',
  'li[text=World']'
];

//then this is the wrong way (but will work anyway):
$$('body').adopt(([
  'ul.listClass#listId', 
    [ template.rendAr() ]
]).rendAr());

//and this is the right way:
$$('body').adopt(([
  'ul.listClass#listId', 
    template
]).rendAr());

pluginItself.js

Array.implement({
  rendAr: function() {
    var el = [];
      this.each(function(item) {
        if (typeOf(item) == 'element') el.push(item);
        else if (typeOf(item) == 'string') el.push(new Element(item));
        else if (typeOf(item) == 'elements') item.each(function(i) {el.push(i);});
        else if (typeOf(item) == 'array') el[el.length - 1].adopt(item.rendAr());
        else if (typeOf(item) == 'object') el[el.length - 1].set(item);
      });
    return el[1] ? new Elements(el) : el[0]; 
  }
});

slickSyntax.js

//The format for the Slick engine markup is:
//  element.class#id[attribute1=value][attribute2=value]...
//as in (notice it's a string):
var myElement = 'a.myClass#myId[href=mootools.net][text=Get Mootools]';