JSFiddle - React, Tailwind, and code Playground

by jimyu

HTML

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Index.aspx.vb" Inherits="AIANZ.AdviserHub.SL.Web.Index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>AIA NZ Adviser Hub</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link  rel="stylesheet" type="text/css" href="Styles/Illustration.css"/>
    <link  rel="stylesheet" type="text/css" href="../Javascripts/jquery/development/themes/base/jquery.ui.all.css" />
    <script type="text/javascript" src="../Javascripts/jquery/js/jquery.min.js"></script>
    <script type="text/javascript" src="../Javascripts/Global.js" ></script>
    <script type="text/javascript" src="../Javascripts/json2.js" ></script>
    <script type="text/javascript" src="../Javascripts/jquery/js/knockout-3.0.0.js"></script>
    <script type="text/javascript" src="../Script/jquery/js/linq.min.js"></script>
    <script type="text/javascript" src="../Javascripts/jquery/js/knockout.mapping-latest.debug.js"></script>
    <script type="text/javascript" src="../Javascripts/jquery/js/knockout.validation.modified.js"></script>
    <script type="text/javascript" src="../Javascripts/jquery/development/external/jquery.bgiframe.js"></script>
    <script type="text/javascript" src="../Javascripts/jquery/development/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="../Javascripts/jquery/development/ui/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="../Javascripts/jquery/development/ui/jquery.ui.mouse.js"></script>
    <script type="text/javascript" src="../Javascripts/jquery/development/ui/jquery.ui.button.js"></script>
    <script type="text/javascript" src="../Javascripts/jquery/development/ui/jquery.ui.draggable.js"></script>
    <script type="text/javascript" src="../Javascripts/jquery/development/ui/jquery.ui.position.js"></script>
    <script type="text/javascript"...

JavaScript

$(function () {
    loadReference();
    function loadReference() {
        var q = Math.round(100 * Math.random());
        $.ajax({
            type: "POST",
            url: "Index.aspx/getListItems?q=" + q,
            data: ko.toJSON({ iAppVersionNo: 0 }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                pageLoad(data.d);
            },
            error: function (err) {
                alert("An error has occurred during processing your request." + err.responseText);
            }
        });
    }

    function pageLoad(listItems) {
        $.ajax({
            type: "POST",
            url: "Index.aspx/NewOperation",
            data: null,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                page.listItems(listItems);
                page.illustration(new illustration(data.d));
                page.init();
                ko.applyBindings(page);
            },
            error: function (err) {
                alert("An error has occurred during processing your request." + err.responseText);
            }
        });
    }
})

var page = {
    listItems: ko.observable(),
    curListItems: ko.observable(),
    //illustration: ko.observable(illu),
    illustration: ko.observable(),
    systemTypes: ko.observableArray(),
    applicationTypes: ko.observableArray(),
    coverTypes: ko.observableArray(),
    paymentFrequencies: ko.observableArray(),
    appVersions: ko.observableArray(),
    productList: ko.observableArray(),
    actions: ["Open", "New", "Save", "SaveAs", "Delete", "AddLife", "DeleteLife", "Preview", "CDFactor"],
    buttons: ko.observableArray(),
    init: function () {
        for (var i = 0; i < this.actions.length; i++) {
            this.buttons.push(new button(this.actions[i], 387, this.illustration));
        }
        //        var prodList =...