KnockoutJS – Templating

Using template is very easy to incorporate into website. For a duplication you don’t need to write over and over again just call them repetitively. Parameters: Following properties can be sent as a parameter-value: name, nodes, data, if, foreach, as, afterAdd, afterRender, beforeRemove. Lets see an example of Templating: <!DOCTYPE html> <head> <title>KnockoutJS – Templating</title> […]

Dependency Tracking – KnockoutJS

Using a single object called dependency tracker i.e. ko.dependencyDetection you can determine when the value get updated. When you declare a computed observable, KO immediately gets its initial value and updated computed observable. Lets see an example for Dependency Tracking: <!DOCTYPE html> <html> <head> <title>Dependency Tracking – KnockoutJS</title> <script src=”http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js” type=”text/javascript”></script> </head> <body> <div> <form […]

Components of KnockoutJS

Components are way of organizing the UI code for structure wise and promote code re-usability for a large application. Components can be registered using the ko.components.register() API. ko.components.register(‘componentname’, { viewModel: {…}, template: {….) }); <!DOCTYPE html> <head> <title>Components of KnockoutJS</title> <script src=”https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js”></script> </head> <body> <h4>Example 1: without parameters</h4> <div data-bind=’component: “example-editor”‘></div> <h4>Example 2: passing parameters</h4> […]

KnockoutJS – Observables

3 concepts in which KnockoutJS is build upon is: – Through observables dom elements and ViewModel exchange information – Bindings between UI and ViewModel – Templating web applications To make it observable declare as: this.property = ko.observable(‘value’); Let’s try below Observables example: <!DOCTYPE html> <head> <title>KnockoutJS – Observables</title> <script type=”text/javascript” src=”http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js”></script> </head> <body> <!– This […]