JSFiddle - React, Tailwind, and code Playground

by tgriley1

HTML

<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<!-- ko foreach: AllRoles -->
<p data-bind="text: Name"></p>
<input data-bind="value: Name, checked: $root.UsersRoles" type="checkbox"></input>
<br />
<!-- /ko -->
<p data-bind="text: UsersRoles()"></p>

JavaScript

var data = {
    AllRoles: [{
        Id: "1",
        Name: "Role 1"
    }, {
        Id: "2",
        Name: "Role 2"
    }],
    UsersRoles: []
};



function FormViewModel(data) {
    this.AllRoles = ko.observableArray(data.AllRoles);
    this.UsersRoles = ko.observableArray(data.UsersRoles);
}

window.viewModel = new FormViewModel(data);

ko.applyBindings(viewModel);