JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class="js-output"></div>

<script type="text/html" id="tmpl">
    <form action=""></form>
        <% _.each(collection, function(model) { %>
        <input type="radio" <% if(model.checked) { %>checked<% } %>><%= model.name %></input><br>
        <% }) %>
    </form>
</script>

JavaScript

console.clear();

var contact = {
    selected: [
        {
            id: 1,
            name: 'Kyle'
        },
        {
            id: 2,
        	name: 'John'
        }
    ],
    collection: [
        {
            id: 1,
            name: 'Kyle',
            checked: false
        },
        {
            id: 2,
            name: 'John',
            checked: false
        },
        {
            id: 3,
            name: 'Joe',
            checked: true
        },
        {
            id: 4,
            name: 'Jane',
            checked: false
        }
    ]
};

console.log(contact);

var template = _.template($('#tmpl').html());

$('.js-output').html(template(contact));