JSFiddle - React, Tailwind, and code Playground

by Murat

HTML

<table>
    <tr>
        <td>Adınız:</td>
        <td>
            <input data-bind='value: dataAd' placeholder="Adiniz" />
        </td>
    </tr>
    <tr>
        <td>Mail adresiniz:</td>
        <td>
            <input data-bind='value: DataEmail' placeholder="Mail Adresiniz" />
        </td>
    </tr>
    <tr>
        <td>Dogum yılınız:</td>
        <td>
            <input data-bind='value: DataDogumYil' placeholder="Doğum Yılınız" />
        </td>
    </tr>
    <tr>
        <td>Metin:</td>
        <td> <span data-bind="text : dataMetin"></span> 
        </td>
    </tr>
</table>

JavaScript

var ViewModel = function () {
    this.dataAd = ko.observable("");
    this.DataEmail = ko.observable("");
    this.DataDogumYil = ko.observable("");
    this.DataBugun = ko.observable("");

    this.dataMetin = ko.computed(function () {
        return 'Merhaba ' + this.dataAd() + ' Eposta Adresiniz: ' + this.DataEmail() + ' Doğum Yılınız: ' + this.DataDogumYil();
    }, this);
};

ko.applyBindings(new ViewModel());