Article:knockout a declarative binding solution Location( )
The samples in the Menu Tree can be loaded here. It helps to view code while seeing it perform.

Contents

Introduction

The purpose of knockout.js is to reduce the overlapping mess of interrelated event handlers. It takes the approach of object-orientated JavaScript and declarative bindings.
Knockout (a.k.a. Knockout.js and KnockoutJS) is an Open-Source JavaScript library available at www.knockoutjs.com that allows you to easily associate DOM elements with Model data using a concise, readable syntax and automatically refresh your UI when your data model's state changes. Knockout follows the Model-View-View-Model (MVVM) design pattern to simplify dynamic JavaScript User Interfaces. What you end up getting is a separation of concerns between your JavaScript and the UI HTML presentation. With Knockout, you can write JavaScript that makes no direct reference to UI elements and the document object model (DOM) in your web page. Knockout is designed to allow you to use arbitrary JavaScript objects as View Models. As long as your View Model's properties are observables, you can use Knockout to bind them to your UI, and the UI will be updated automatically whenever the observable properties change.

Useful Links 

<script type="text/javascript">

  $(document).ready( function () {


  });

</script>

<script>
     // MANUAL Here's my data model
     //    var ViewModel = function (first, last) {
     //        this.firstName = ko.observable(first);
     //        this.lastName = ko.observable(last);

     //         this.fullName = ko.computed(function () {

     // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, 
     //because these get called when evaluating fullName. text/x-jquery-tmpl template:{name:'friendsTemplate', foreach:friend}<li data-bind="text: name"></li>
     //            return this.firstName() + " " + this.lastName();
     //        }, this);
     //    };

     //    $(document).ready(function () {
     //        ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work????  text/html  
     //   });

     /*
     <div data-bind="template:'friendsTemplate'"></div> 
       
    <ul>
        {{ each(index,friend) friends }}
            <li>${friend.name}</li>
        {{/each}}
    </ul>
  
     */

</script>

You have asked for   gift(s)