KO + TS Demo
How do I make an ko + ts demo?
What is a ko + ts demo? How do you make a ko + ts demo? This script and codes were developed by Ruslan Marin on 07 December 2022, Wednesday.
KO + TS Demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>KO + TS Demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <p>First name: <strong data-bind="text: firstName"></strong></p> <p>Last name: <strong data-bind="text: lastName"></strong></p> <p>Full name: <strong data-bind="text: fullName"></strong></p> <p>First name: <input data-bind="value: firstName, valueUpdate: 'keyup'" /></p> <p> Last name: <input data-bind="value: lastName, valueUpdate: 'keyup'" /> <button data-bind="click: capitalizeLastName">Go caps</button> </p>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script> <script src="js/index.js"></script>
</body>
</html>
KO + TS Demo - Script Codes CSS Codes
div { background: linear-gradient(45deg, #aa0, #7f0); padding: 1em; border: .2em solid green; p { color: darkgreen; }
}
KO + TS Demo - Script Codes JS Codes
"use strict";
var PersonViewModel = (function () { function PersonViewModel() { var _this = this; this.separator = " "; this.firstName = ko.observable(""); this.lastName = ko.observable(""); this.fullName = ko.computed(function () { return "" + _this.firstName() + _this.separator + _this.lastName(); }); } PersonViewModel.prototype.capitalizeLastName = function () { this.lastName(this.lastName().toUpperCase()); }; return PersonViewModel;
}());
// Activates knockout.js
ko.applyBindings(new PersonViewModel());
Developer | Ruslan Marin |
Username | marinru |
Uploaded | December 07, 2022 |
Rating | 3 |
Size | 2,347 Kb |
Views | 16,192 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
KO Components Demo | 2,994 Kb |
Sidescroller with p5.js | 2,455 Kb |
Phone Call Links | 1,217 Kb |
Component Props | 3,113 Kb |
A Pen by Ruslan Marin | 1,561 Kb |
P5.js Clock | 2,414 Kb |
Rotating Cubes with p5.js | 1,753 Kb |
BnW | 1,489 Kb |
Vue.js Loops | 1,555 Kb |
Vue.js Attribute Binding | 1,531 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
CLE_Old_March | Saritaleroux | 6,234 Kb |
Responsive Menu I | Rodericksandoval | 3,045 Kb |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
Map Controls | Iliadraznin | 3,721 Kb |
Dice | Fraina | 5,026 Kb |
Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
Knob rotation | Alemesre | 2,122 Kb |
Compare resources on mobile sites | Gyusza | 3,226 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!