Question

I have created a mini template that holds and <h2> & <h3>, I have created a loop that adds .inner everytime i%2 === 0, what i would like to do is split up the data being outputted to follow the same kind of rule so when i%2 === 0 add .inner and also split the object properties so each .inner should display 2 templated object properties. Can anyone advise on how this can be achieved? Also my templated items seem to return undefined?

Demo here http://jsbin.com/otirax/13/edit

Answer 1

Your code can be improved in many ways. The selector here:

$('.inner').append(temp);

should actually be $(".inner:last"), otherwise it affects all “.inner” objects created so far. Better yet, save a newly created div in a variable:

inner = $('<div class="inner"></div>').appendTo($('#ctn'));

and then simply use the var, thus saving an expensive selector operation:

inner.append(...);

Another improvement is to automate template rendering. Consider the following function: it populates arbitrary {{tags}} from an object:

  function render(template, values) {
    return template.replace(
      /{{(\w+)}}/g, 
      function($0, $1) { return values[$1] });
  }

Complete example: http://jsbin.com/iviziz/2/edit
. Let us know if you have questions.