JSFiddle - React, Tailwind, and code Playground

by StevenSanderson

HTML

<script src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/js/knockout-1.2.1.js"></script>
    <div class="container" data-bind="template: 'myTemplate'"></div>

    <script type="text/x-jquery-tmpl" id="myTemplate">
      {{each(i, item) items}}
        <div data-bind="css: { selected: item.Selected }" class="box"></div>
      {{/each}}
    </script>

CSS

.box {
        width: 100px;
        height: 100px;
        float: left;
        margin-right: 10px;
        background-color: red;
      }

      .selected {
        background-color: orange;
      }

      .highlight {
        background-color: blue;
      }

JavaScript

var MyObject = function() {
    this.Selected = ko.observable(false);
    this.Highlight = ko.observable(false);
    this.Color = ko.observable("red");
}
    
var viewModel = {
    items: ko.observableArray()    
}
viewModel.items([new MyObject, new MyObject, new MyObject]);
    
ko.applyBindings(viewModel);

        /*
var selectedChange = function() {
        // Doing something here and checking Selected()
        this.Selected();
      };

      var MyObject = function() {
        this.Selected = ko.observable(true);
        this.Selected.subscribe(selectedChange, this);
      }

      var viewModel = {
        items: ko.observableArray(),
        trigger: ko.observable(false),
        select: false
      };

      viewModel.items([new MyObject, new MyObject, new MyObject, new MyObject, new MyObject, new MyObject, new MyObject]);

      viewModel.filteredItems = ko.dependentObservable(function() {
        var items = viewModel.items();
        viewModel.trigger();

        // Reset the selected attribute
        $.each(items, function(i, item) {
          item.Selected(false);
        });

        // Filter my items usually
        if(viewModel.select) {
          $.each(items, function(i, item) {
            item.Selected(true);
          });
        }

        return items;
      });

    $(function() {
      $('#trigger').click(function() {
        viewModel.trigger(!viewModel.trigger());
      });

      $('#selected').click(function() {
        viewModel.select = true;
      });

      ko.applyBindings(viewModel);
    });*/