JSFiddle - React, Tailwind, and code Playground

by Jon Kittell

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- ko with: loginDialog -->
<button data-bind="click: loginDialog">Login</button>
<div id='logindlg' class="dialog" data-bind="dialog: {autoOpen: false, modal: true, closeOnEscape: false, title: 'Login', height: 300, width: 550, dialogClass: 'no-close', resizable: false}, openWhen: open">
    <!-- more stuff here -->
</div>
<!-- /ko -->

JavaScript

debugger;

function LoginDialog(viewModel) {
    var self = this;
    this.viewModel = viewModel;

    this.userid = ko.observable();
    this.password = ko.observable();
    this.open = ko.observable(false);
    this.message = ko.observable();

    // more here
}

function ViewModel() {
    var self = this;
    self.loginDialog = ko.observable(new LoginDialog(self));
}


ko.bindingHandlers.dialog = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor());
        setTimeout(function () {
            $(element).dialog(options || {});
        }, 0);

        //handle disposal (not strictly necessary in this scenario)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).dialog("destroy");
        });
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().openWhen);
        var options = ko.utils.unwrapObservable(valueAccessor());
        var $elem = $(element);
        var dynamicOptions = ko.utils.unwrapObservable(allBindingsAccessor().dynamicOpts) || {};
        $elem.dialog(shouldBeOpen ? "open" : "close");
        if (dynamicOptions.title) $elem.dialog("option", "title", ko.utils.unwrapObservable(dynamicOptions.title));
    }
};



ko.applyBindings(new ViewModel());