JSFiddle - React, Tailwind, and code Playground

by Asle Gundersby

HTML

<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<select data-bind="options: $root.myItems, optionsCaption: '< choose cpu >', optionsText: 'name', value: $root.selected"></select><br/>   
<hr>
    
<ul data-bind="foreach: $root.myItems">
    <li> <span data-bind="text: name"></span><span data-bind="visible: isSelected, text: ' is selected'"></span></li>       
</ul>

JavaScript

Item = function(data){
    var self = this;
    
    self.id  = data.id;
    self.name = ko.observable(data.name);

    self.isSelected = ko.computed(function(){
        var selected = false;
    // how to address the 'viewModel.selected' from here???
        
        return selected;
    });
    return self;
};

var viewModel = function () {
    var self = this;
  
    self.myItems = ko.observableArray();
        
    // fill with data (sikkert en bedre måte å gjøre dette på, men jeg trøbler alltid her, så gjør det på den sikre måten ;)
    self.myItems.push(new Item({
            id: 1, 
            name: 'Anders'
        }));
    self.myItems.push(new Item({
            id: 2, 
            name: 'Asle'
        }));
    
    self.selected = ko.observable();
};

$(function() {
    window.viewModel = new viewModel();
    ko.applyBindings(window.viewModel);
});