Knockout JS Demo sample

Source: Internet
Author: User
Tags button type

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.