Knockout JS Demo sample

Five sample, from knockout JS official site.

Tutorial 1//following codes uses to demonstrate observable values and target bound ways especially method bound<!--T His was a *view*-HTML markup that defines the appearance of your UI--><p>first name: <strong data-bind= "text : FirstName "></strong></p><p>last name: <strong data-bind=" Text:lastname "></strong ></p><p>first Name: <input data-bind= "Value:firstname"/></p><p>last Name: < Input data-bind= "Value:lastname"/></p><p>full Name: <strong data-bind= "Text:fullname" ></ Strong></p><button data-bind= "Click:capitalizelastname" >go caps</button>//This was a simple * viewmodel*-JavaScript that defines the data and behavior of your uifunction Appviewmodel () {this.firstname = Ko.obse    Rvable ("Bert");    This.lastname = ko.observable ("Bertington");        This.fullname = ko.computed (function () {return this.firstname () + "" + this.lastname (); }, this);        This.capitalizelastname = function () {var currentval = This.lastname (); Read the current value This.lastname (Currentval.touppercase ());    Write back a modified value};  }//activates Knockout.jsko.applyBindings (new Appviewmodel ());//tutorial 2//this demo shows how to use observable array to Bind HTML elements and how to define Model
 
 
 $ (Element). FadeIn (): $ (Element). FadeOut (); }};ko.bindinghandlers.jqbutton = {init:function (Element) {$ (Element). button ();//Turns the element into a JQ        Uery UI Button}, update:function (element, valueaccessor) {var currentvalue = Valueaccessor (); Here we just update for the "disabled" state, but you could update other properties too $ (Element). button ("option",    "Disabled", currentvalue.enable = = = False); }};ko.bindinghandlers.starrating = {init:function (element, Valueaccessor) {$ (Element). addclass ("Starratin        G ");               for (var i = 0; i < 5; i++) $ ("<span>"). AppendTo (Element);                Handle mouse events on the stars $ ("span", Element). (function (index) {$ (this). Hover ( Function () {$ (this). Prevall (). Add (The). AddClass ("Hoverchosen")}, function () {$ (this). Prevall (). Add (this). Removeclass ("Hoverchosen")}). ClickCtion () {var observable = Valueaccessor ();               Get The associated observable observable (index+1);        Write the new rating to it});                });         }, Update:function (element, valueaccessor) {//Give the first X stars the "Chosen" class, where x <= rating        var observable = Valueaccessor ();        $ ("span", Element). Each (function (index) {$ (this). Toggleclass ("Chosen", Index < observable ());    }); }};//----------------------------------------------------------------------------//Page viewmodelfunction Answer (text) {this.answertext = text; this.points = ko.observable (1);}    function Surveyviewmodel (question, Pointsbudget, answers) {this.question = question;    This.pointsbudget = Pointsbudget;    This.answers = $.map (answers, function (text) {return new Answer (text)});               This.save = function () {alert (' To Do ')}; this.pointsused = ko.computed (function () {       var total = 0;        for (var i = 0; i < this.answers.length; i++) Total + = This.answers[i].points ();            return total; }, this);} Ko.applybindings (New Surveyviewmodel ("which factors affect your technology choices?", ten, ["functionality, Compatibilit Y, pricing-all that boring stuff "," how often it was mentioned on Hacker News "," Number of gradients/dropshadows On Project homepage ', ' totally believable testimonials on Project homepage ']);//tutorial 5//shows how to commun Icate with server side and what to delete items using deleted flag

Knockout JS Demo sample