JSFiddle - React, Tailwind, and code Playground

by TheSneak

HTML

<script src="https://raw.github.com/jquery/jquery-tmpl/master/jquery.tmpl.js"></script>

<div id="placeholder"></div>

<script id="tmpl" type="text/x-jquery-tmpl">
    <input type="text" {{if brother && brother.likesBlue}}value="this guy likes blue"{{/if}} />
</script>

<script id="workaround" type="text/x-jquery-tmpl">
    <input type="text" {{if $data.hasOwnProperty("brother") && brother.likesBlue}}value="this guy likes blue"{{/if}} />
</script>

CSS

div{
    background-color: red;
}

JavaScript

var stuff = {
    xbrother: {
        likesBlue: true
    }
};

try {
    //here we pass in an object that does not have the property being checked by the template ("brother")
    //this results in an error
    $("#tmpl").tmpl(stuff).appendTo("#placeholder");
} catch (ex) {
    $("#placeholder").text("Error on line " + ex.lineNumber + ": " + ex.message);
}

try {
    //here we pass in an object that does not have the property to be checked, but we're using the workaround
    //template which uses the hasOwnProperty() method (don't forget to put the param in quotes)
    //This time, there is no error.  It works as expected.
    $("#workaround").tmpl({}).appendTo("#placeholder");
} catch (ex) {
    $("#placeholder").text("Error on line " + ex.lineNumber + ": " + ex.message);
}