Knockout Demo1

Step 1

by shubh0602

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0rc2.js"></script>
Modify Data
<table>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Full Name</th>
    </tr>
    <tr>
        <td><input data-bind="value:firstName"/></td>
        <td><input data-bind="value:lastName"/></td>
        <td><input data-bind="value:fullName"/></td>
    </tr>
</table>
            
Reflected Data            
<table>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Full Name</th>
    </tr>
    <tr>
        <td><span data-bind="text:firstName"></td>
        <td><span data-bind="text:lastName"></td>
        <td><span data-bind="text:fullName"></td>

    </tr>
</table>

CSS

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}

JavaScript

function AppViewModel() {
    this.firstName = ko.observable("Shubh");
    this.lastName = ko.observable("Dasgupta");
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
};
ko.applyBindings(new AppViewModel());