KO Components Demo
How do I make an ko components demo?
Knockout components demo with the viewmodel written in Typescript. What is a ko components demo? How do you make a ko components demo? This script and codes were developed by Ruslan Marin on 07 December 2022, Wednesday.
KO Components Demo - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>KO Components Demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section id="templates"> <template id="myComponentTemplate"> <div class="first name">First name: <span data-bind="text:firstName"></span></div> <div class="last name">Last name: <span data-bind="text:lastName"></span></div> <div class="full name">Full name: <span data-bind="text:fullName"></span></div> </template>
</section>
<section> <mycomponent params="person: person1"></mycomponent> <mycomponent params="person: person2"></mycomponent>
</section> <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 Components Demo - Script Codes CSS Codes
mycomponent:first-child { float: left;
}
mycomponent:last-child { float: right;
}
mycomponent .name { border-left: 5px solid lightblue; padding: 1em;
}
mycomponent .first { background: linear-gradient(to right, #f77, #7f7);
}
mycomponent .last { background: linear-gradient(to right, #77f, #7f7);
}
mycomponent .full { background: linear-gradient(to right, #77f, #f77);
}
KO Components Demo - Script Codes JS Codes
"use strict";
var Person = (function () { function Person(firstName, lastName) { this.firstName = ko.observable(); this.lastName = ko.observable(); this.firstName(firstName); this.lastName(lastName); } return Person;
}());
var MainViewModel = (function () { function MainViewModel() { this.person1 = new Person("John", "Doe"); this.person2 = new Person("John", "Smith"); } return MainViewModel;
}());
var MyComponentViewModel = (function () { function MyComponentViewModel(params) { var _this = this; this.firstName = params.person.firstName; this.lastName = params.person.lastName; this.fullName = ko.computed(function () { return _this.firstName() + " " + _this.lastName(); }); } return MyComponentViewModel;
}());
ko.components.register("mycomponent", { template: { element: "myComponentTemplate" }, viewModel: MyComponentViewModel
});
var mainVM = new MainViewModel();
ko.applyBindings(mainVM);
Developer | Ruslan Marin |
Username | marinru |
Uploaded | December 07, 2022 |
Rating | 3 |
Size | 2,994 Kb |
Views | 8,096 |
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 |
Vue 001. Hello World | 1,438 Kb |
BnW | 1,489 Kb |
SimplePager | 4,584 Kb |
Phone Call Links | 1,217 Kb |
Rotating Cubes with p5.js | 1,753 Kb |
Vue.js Basic Component | 1,566 Kb |
Component State | 3,702 Kb |
Vue.js Conditional Visibility | 1,520 Kb |
Typescript Demo | 2,594 Kb |
Socket.io Client Demo | 1,490 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 |
Shop Talk logo made in CSS | Hugo | 19,368 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
Degree Picker | Idered | 4,307 Kb |
Sketchy Box | Mnicpt | 3,033 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
AngularJS Datalist Directive | M-e-conroy | 2,366 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 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!