JSFiddle - React, Tailwind, and code Playground

by Jeroen Heijmans

HTML

<span class="areas" data-bind="foreach: areas">
  <label><input type="checkbox" data-bind="value: AreaId, checked: $parent.AreasImpacted" />
      <span data-bind="text: Name"></span>
    </label>
    <br />
</span>

JavaScript

var AreaVm = function (id, name) {
    this.AreaId = ko.observable(id);
    this.Name = ko.observable(name);
}

var ViewModel = function ()
{   
   this.areas = ko.observableArray([new AreaVm(1,'Test 1'), new AreaVm(2,'Test 2'), new AreaVm(3,'Test 3')]);
   this.AreasImpacted = ko.observableArray(['1', '2']);
};

ko.applyBindings(new ViewModel());