JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<!-- ko foreach: items -->
        <div>
            <input data-bind="value: firstName">
            <input data-bind="value: lastName">
            <input type="checkbox" value="msg" data-bind="checked: valid" />
        </div>
    <!-- /ko -->

JavaScript

var fakeData = [
    {
    firstName: "Alex",
    lastName: "Zeitler"},
{
    firstName: "Jason",
    lastName: ""}
];

var personViewModel = function(data) {
    ko.mapping.fromJS(data, {}, this);
    
    this.valid = ko.computed(function() {
        return (this.firstName() && this.firstName().length > 0) 
            && (this.lastName() && this.lastName().length > 0);

    }, this);
};

var mappingOptions = {
    create: function(options) {
        return new personViewModel(options.data);
    }

};

var ViewModel = function(data) {
    items = ko.mapping.fromJS(data, mappingOptions);
}

var vm = new ViewModel(fakeData);
ko.applyBindings(vm);