JSFiddle - React, Tailwind, and code Playground

by jhoguet

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<div data-bind="template: {name: 'TopicViewModel.ul', data: Topics}" ></div>

<script id="TopicViewModel.ul" type="text/html">
    <ul data-bind="foreach: $data">
    <li>
        <strong data-bind="text: Topic"></strong>
        <button data-bind="click: $root.removeTopic">X</button>
    </li>    
</ul>
    <button data-bind="click: $root.addTopic"> New Topic</button>
</script>

CSS

tbody{
 vertical-align: top;   
}

thead{
 border-bottom: solid 1px black;   
}

strong{
 font-weight: bold;   
}
em{
 font-style: italic;
display: block;        
}

JavaScript

function TopicViewModel(options){
    options = options || {};
    var self = this;
    self.Topic = ko.observable(options.Topic);
    self.Description = ko.observable(options.Description);
}

function TopicsAppViewModel(options){
    options = options || {};
    var self = this;
    self.Topics = ko.observableArray(options.Topics || []);
    self.removeTopic = function(topic){
        self.Topics.remove(topic);
    };
    self.addTopic = function(){
      var topic = prompt('Topic');
        self.Topics.push(new TopicViewModel({Topic: topic}));
    };
};

var viewModel = new TopicsAppViewModel({
    Topics: [
        new TopicViewModel({
            Topic: 'Introducton to Knockout.js (javascript MVVM)'}),
        new TopicViewModel({
            Topic: 'ASP.NET MVC: What’s New and What’s Next?'})
    ]})


ko.applyBindings(viewModel );