JSFiddle - React, Tailwind, and code Playground

by tyrsius

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
 <div data-bind="foreach: selectedNews">
                      <div  class="news-item">
                            <a data-bind="attr: { href: url, title: title }">
                                <div class="news-header-text" data-bind="text: title" /></div>
                            </a>
                            <div class="news-date" data-bind="text: date" /></div>
                             
                                    </div>           
            </div>

JavaScript

if(location.protocol != "data:")
                {
                    $(window).bind('hashchange', function()
                    {
                        window.parent.handleChildIframeUrlChange(location.hash)
                    });
                }

                // Class to represent a row in the seat reservations grid
                function cebesEnNewsIndex(title, date, url, catId, hits)
                {
                    var self = this;
                    self.title = title;
                    self.date = date;
                    self.url = url;
                    self.catId = catId;
                    self.hits = hits;
                }

                // Overall viewmodel for this screen, along with initial state
                function cebesEnNewsIndexViewModel()
                {
                    var self = this;


                    // Non-editable catalog data - would come from the server

                    // Editable data
                    self.news = ko.observableArray([
                    new cebesEnNewsIndex("Welcome to Cebes Enterprise", "18 Mey 2012", "#", '4', '20'),
                    new cebesEnNewsIndex("Groove for Dummies", "20 Mey 2012", "#", "4", "21"),
                    new cebesEnNewsIndex("New Features of Cebes Framework", "18 Mey 2012", "#", "3", "19"),
                    new cebesEnNewsIndex("Welcome to Cebes Enterprise", "20 Mey 2012", "#", "3", "24"),
                    new cebesEnNewsIndex("Welcome to Cebes Enterprise sdfadfa", "18 Mey 2012", "#", '4', '20'),
                    new cebesEnNewsIndex("Groove for Dummiessdfadf", "20 Mey 2012", "#", "4", "21"),
                    new cebesEnNewsIndex("New Features of Cebes Frameworksdfad", "18 Mey 2012", "#", "3", "19"),
                    new cebesEnNewsIndex("Welcome to Cebes Enterprisdfadfe", "20 Mey 2012", "#", "3", "24"),
                    new cebesEnNewsIndex("Welcome to Cebes Enterprissdfadfe", "18 Mey 2012", "#", '4', '20'),
              ...