Is "Conditional Rendering" possible with Pure JS?

Question

I use Pure JS directives for rendering:

http://beebole.com/pure/documentation/rendering-with-directives/

If a node in the template is missing, the default behaviour of Pure JS is to crash due to:

The node "XXX" was not found in the template

This default behaviour is totally comprehensible, because it ensures there are no inconsistencies in the template. In same cases, though, one would like to skip a failing assignment and to proceed with the rest of the assignments (possibly logging the error), to avoid the whole rendering to fail because of a single error / typo.

Is there any way to obtain this behaviour with Pure JS? Can I tell Pure JS to render an element just "if it exists"?

Answer 1

Unfortunately current stable version of Pure JS (revision: 2.79) does not allow to render an element "if it exists"?

The following Pure code snippet shows how the error is thrown:

if(selector === '.' || ( !selector && attr ) ){
    target[0] = dom;
}else{
    target = plugins.find(dom, selector);
}
if(!target || target.length === 0){
    return error('The node "' + sel + '" was not found in the template:\n' + outerHTML(dom).replace(/\t/g,'  '));
}

As you can see, if target has not been found (by one of libraries such as jQuery, dojo etc.) then the mentioned error is thrown.

---

Workaround I use in that kind of situations is as follows:

• I use template with all possible elements so that Pure does not throw errors
• Some elements (e.g. displaying error messages etc.) are hidden using CSS classes
• I change CSS classes using Pure and JavaScript functions with directives to hide / show elements depending on input data.