Search code examples
javascriptpure-js

How to autorender a JSON array using pure.js?

I am trying to use the pure.js templating engine to convert a JSON array into HTML code.

I understand how to use autoRender() to map an associative map to HTML: http://jsfiddle.net/P7H98/

but if I replace the associative map with an array, I end up with iteration that inserts empty rows: http://jsfiddle.net/P7H98/1/

Is it possible to autoRender() an array and end up with the same output as the first example?

UPDATE: Nesting <div class="toString"></div> inside the <li> node fixes the problem. But I'm still not sure why. Surely there is a more readable solution to this problem?

Solution

  • The toString is a coincidence.

    The property names triggers a loop, because it points to an array.
    Then the toString is a method that exists for each array element, and is called.

    If you add the class toString on the LI, it will work.

    You should try using render and directives. They can be generated on the fly, and give you a more precise control of what needs to be done.