JSFiddle - React, Tailwind, and code Playground

by JayData

HTML

<script src="http://include.jaydata.org/jaydata.js"></script>
<div id="todos"></div>
<form>
<input id="txtNew" name="txtNew"></input>
<input id="txtPerson" name="txtNew"></input>
</form>
<a href="#" id="btnAdd">add</a>

JavaScript

$(function () {
    $data.Entity.extend("Todo", {
        Id: { type: "int", key: true, computed: true },
        Task: { type: String, required: true, maxLength: 200 },
        DueDate: { type: Date },
        Completed: { type: Boolean },
        Person: { type: "Person", required: true, inverseProperty: "Todos" }
    });

    $data.Entity.extend("Person", {
        Id: { type: "int", key: true, computed: true },
        Name: { type: String, required: true, maxLength: 200 },
        Todos: { type: Array, elementType: Todo, inverseProperty: "Person" }
    });

    $data.EntityContext.extend("TodoDatabase", {
        Todo: { type: $data.EntitySet, elementType: Todo },
        Person: { type: $data.EntitySet, elementType: Person }
    });

    var todoDB = new TodoDatabase({ provider: 'webSql', databaseName: 'MyTodoDatabase' });

    todoDB.onReady(function () {
        todoDB.Person.forEach(function (person) {
            $('#ddlPerson').append('<option value=\"' + person.Id + '\">' + person.Name + '</option>');
        });
    });

    $('#btnAdd').click(function () {
        var value = $('#txtNew').val();
        var pvalue = $('#txtPerson').val();
        if (!value) return;
        var now = new Date();
        todoDB.Todo.add({
            Task: value,
            CreatedAt: now,
            ModifiedAt: now,
            Person: new Person({
                Name: pvalue
            })
        });

        todoDB.saveChanges();
        updateView();
    });

    function updateView() {
        if (todoDB) {
            $('#todos').empty()
            todoDB.Todo.include("Person").forEach(function (todo) {
                $('#todos')
                    .append('<li>' + todo.Task + ',' + todo.Person.Name + '</li>');
            });
        }
    }
});