JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

Sports
<ul data-bind="template: { name: 'listingTemplate', foreach: sports}"></ul>
</br>
Music
<ul data-bind="template: { name: 'listingTemplate', foreach: music}"></ul>

<script type="text/html" id="listingTemplate">
<li>
    <span data-bind="text: name"></span></br>
    <span data-bind="text: description"></span></br>
    <span data-bind="text: endDate"></span></br></br>
</li>
</script>

CSS

ul {margin-left: 5px; }

JavaScript

var Listing = function(data) {
    this.name = ko.observable(data.Name || '');
    this.description = ko.observable(data.Description|| '');
    this.endDate = ko.observable(data.EndDate|| '');
};

var ViewModel = function(data) {
    this.sports = ko.observableArray(
        ko.utils.arrayMap(data.Sport, function(i) {return new Listing(i);})
    );
    this.music = ko.observableArray(
        ko.utils.arrayMap(data.Music, function(i) {return new Listing(i);})
    );
};

var data = {
    "Sport": [
        {
            "Name": "nana",
            "Description": "lmkmsdqd",
            "EndDate": "2012-07-22T00: 00: 00"
        },
        {
            "Name": "sfqsdffqf",
            "Description": "lkqjskdlqsd",
            "EndDate": "2012-07-22T00: 00: 00"
        }
    ],
    "Music": [
        {
            "Name": "nana",
            "Description": "lmkmsdqd",
            "EndDate": "2012-07-22T00: 00: 00"
        },
        {
            "Name": "sfqsdffqf",
            "Description": "lkqjskdlqsd",
            "EndDate": "2012-07-22T00: 00: 00"
        }
    ]
};
ko.applyBindings(new ViewModel(data));