JSFiddle - React, Tailwind, and code Playground

by nveron

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.debug.js"></script>
<input id="ajouterQuestion" class="lienAjouter" type="button" value="Ajouter une question" data-bind="click: open" />

<input id="ajouterReponse" type="button" class="lienAjouter" value="Ajouter une réponse" data-bind="click: open" />

<div id="dialog-question-form" data-bind="dialog: {autoOpen: false, title: 'Ajouter une question',
 height: 641, width: 800, resizable: false, modal: true },
 ">
<p>
    <span class = "espacement-label">Libellé </span>
    <input data-bind="value: libQuest" type="text" />
    </p>
    <p>
    <span class = "espacement-label">Priorité </span>
    <input data-bind="value: prioriteQuest" type="text"/>
    </p>
    <p>
    <span class = "espacement-label">Nombre de réponses possibles </span>
    <input data-bind="value: nbReponsesQuest" type="text"/>
    </p>
    <p>
    <span class = "espacement-label">Obligatoire </span>
    <input data-bind="value: reponseObligatoire" type="text"/>
    </p>
    <p>
    <span class = "espacement-label">Commentaire </span>
    <textarea data-bind="value: commentaireQuest"></textarea>
    </p>
    <input data-bind="click: ajouterQuestion" type="button" value="Valider" />
</div>
<div id="dialog-reponse-form" data-bind="dialog: {autoOpen: false, title: 'Ajouter une réponse',
 modal: true },
 dialogVisible: isOpen">
    <input data-bind="value: tmpValReponse" type="text" />
    <input data-bind="click: ajouterReponse" type="button" value="Valider" />
</div>

JavaScript

//Custom binding pour les dialogs jquery
    ko.bindingHandlers.dialog = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var options = ko.utils.unwrapObservable(valueAccessor()) || {};
            //un timeout pour qu'applyBindings ne binde pas à outrance.
            setTimeout(function () {
                options.close = function () {
                    allBindingsAccessor().dialogVisible(false);
                };

                $(element).dialog(options);
            }, 0);

            //Gestion du dispose
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).dialog("destroy");
            });
        },
        update: function (element, valueAccessor, allBindingsAccessor) {
            var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible);
            $(element).dialog(shouldBeOpen ? "open" : "close");
        }
    };

var qrViewModel = function () {
            var self = this;
 //observables et fonctions pour le dialog jquery
            self.isOpen = ko.observable(false);
            self.open = function () { this.isOpen(true); }
            self.close = function () { this.isOpen(false); }
        }
    
    ko.applyBindings(new qrViewModel());