JSFiddle - React, Tailwind, and code Playground

by vyshniakov

HTML

<div>
    <ul data-bind="foreach:Patients">
        <li data-bind="click:$root.selectPatient">
            <table>
                <tr>
                    <td>
                        <a href="javascript:" id="pName" sortorder="none"><span data-bind="text:LastName"></span>
                            ,<span data-bind="text:$data.FirstName"></span></a>
                    </td>
                    <td>
                        <a href="javascript:" id="pid" sortorder="none"><span data-bind="text:$data.DisplayId">
                        </span></a>
                    </td>
                    <td>
                        <a href="javascript:" id="pLocation" sortorder="none"><span data-bind="text:$data.UnitName">
                        </span></a>
                    </td>
                </tr>
            </table>
        </li>
    </ul>
</div>

<div id="dlgAction" data-bind="with:selectedPatient">
    What would you like to do for <span data-bind="text: LastName"></span>,<span data-bind="text: FirstName"></span>
</div>

JavaScript

function PatientsModel(data) {
    var self = this;

    self.Patients = ko.observableArray([]);

    if (data == null) {
        self.Patients([]);
    }
    else {
        self.Patients(data);
    }

    self.selectedPatient = ko.observable(null);

    self.selectPatient = function(data, target) {
        self.selectedPatient(data);

        //$('#dlgAction').dialog('open');
    };
}

MyPatientList = {
    PatientsModel: null,
    DOMElementId: 'MyPatientDiv'
}

    var data = [{
        AccountId: null,
        AdmissionStatus: 1,
        AttendingPhysicians: null,
        BedId: null,
        DisplayId: "32456",
        EncounterKey: "00000000000000000000000000000003",
        FirstName: "John",
        Gender: null,
        LastName: "Rambo",
        LocalPatient: true,
        MiddleName: null,
        MyPatient: true,
        PatientId: null,
        PatientKey: "00000000000000000000000000000003",
        RoomName: null,
        SameName: false,
        TemporaryPatient: false,
        UnitName: "IC1",
        VisitId: null}];

    MyPatientList.PatientsModel = new PatientsModel(data);
    ko.applyBindings(MyPatientList.PatientsModel);