KnockoutJS

KnockoutJS

 Knockout is a JavaScript library that helps you to create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically (e.g., changing depending on the user’s actions or when an external data source changes), KO can help you implement it more simply and maintainably.

http://knockoutjs.com/documentation/introduction.html
http://learn.knockoutjs.com/#/?tutorial=intro

// This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI

this.DisplayMyName= function () {
        var currentVal = this.lastName();        // Read the current value
        this.lastName("Suraj Shrestha".toUpperCase()); // Write back a modified value
    }

function AppViewModel1() {
    this.firstName = ko.observable("");
   this.lastName = ko.observable("");
   this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();    
        }, this);
}

function AppViewModel() {
    // ... leave firstName, lastName, and fullName unchanged here ...
    //this.firstName = ko.observable("");
   this.lastName = ko.observable("");
    this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };
}
// Activates knockout.js
ko.applyBindings(new AppViewModel());
//ko.applyBindings(new AppViewModel());

<p>First name: <strong >todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>

<p>First name: <input  /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

<button data-bind="click: DisplayMyName">Go caps</button>