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: isOpenQuestion.bind($root, true)" />

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

<div id="dialog-question-form" data-bind="dialog: {dialogVisible: isOpenQuestion, 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: {dialogVisible: isOpenReponse,autoOpen: false, title: 'Ajouter une réponse',
 modal: true }">
    <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()) || {};
            $(element).dialog(options);
            //Gestion du dispose
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).dialog("destroy");
            });
        },        
        update: function (element, valueAccessor, allBindingsAccessor) {
            var options = ko.utils.unwrapObservable(valueAccessor()) || {};            
            var shouldBeOpen = options.dialogVisible();
            $(element).dialog(shouldBeOpen ? "open" : "close");
            
        }

    };

var qrViewModel = function () {
            var self = this;
 //observables et fonctions pour le dialog jquery
            this.isOpenQuestion = ko.observable(false);
            this.isOpenReponse = ko.observable(false);    
    this.openQuestion = function(){
        self.isOpenQuestion(true);
    }
    this.openReponse = function(){
        self.isOpenReponse(true);
    }
    
            this.libQuest = ko.observable();
            this.prioriteQuest= ko.observable();
            this.nbReponsesQuest= ko.observable();
            this.reponseObligatoire= ko.observable();
            this.commentaireQuest= ko.observable();
            this.tmpValReponse= ko.observable();
            this.ajouterQuestion = function(){};
            this.ajouterReponse = function(){};
        }
    
    ko.applyBindings(new qrViewModel());