JSFiddle - React, Tailwind, and code Playground

by jcreamer898

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.1.2.js"></script>
<input name="key" id="key" placeholder="key" />
<input name="value" id="value" placeholder="value" />

<button data-bind="click: AddDynamicData">Add</button>

<ul data-bind="template: { name : 'DynamicDataTemplate' afterRender: setup}" >
</ul>

<script type="text/html" id="DynamicDataTemplate">
    {{each DynamicData()}}
        <li>${name} ${value}</li>
    {{/each}}
</script>

JavaScript

var viewModel = {
    DynamicData : ko.observableArray([]),
    setup: function(el){
        console.log(el);
    }
}

viewModel.AddDynamicData = function(){
    var key = $("#key").val();
    var val = $("#value").val();
    
    viewModel.DynamicData.push({ name : key, value : val });
}

viewModel.DynamicData.push({ 
    name : 'SalesPhoneNumber',
    value : '6151234567' });

viewModel.DynamicData.push({ 
    name : 'SalesEmailAddress',
    value : '[email protected]' });
    
ko.applyBindings(viewModel);