Why Choose KnockOut JS?
Prakash Software Pvt. Ltd.
Why Choose KnockOut JS?

Why Knockout

  • Knockout is not a replacement of Jquery but can work as supplement providing smart features.

  • Good option for creating self-updating UIs for JavaScript objects.

  • It is a JavaScript library that allows binding HTML elements against any data model.

  • It will reduce server round trips for Single Page Applications.

Reasons to Use Knockout.js for Web Development

  1. Knockout.js is a MVVM framework

  • Model-View-View Model (MVVM) :

    1. model

    2. view model: a pure-code representation of the data and operations on a UI. For example, if you’re implementing a list editor, your view model would be an object holding a list of items, and exposing methods to add and remove items. Note that this is not the UI itself: it doesn’t have any concept of buttons or display styles. It’s not the persisted data model either – it holds the unsaved data the user is working with. When using KO, your view models are pure JavaScript objects that hold no knowledge of HTML. Keeping the view model abstract in this way lets it stay simple, so you can manage more sophisticated behaviors without getting lost.

    3. view

 

 

2. Built-in Templating

  • Knockout.js provides DOM-based templating and by default uses HTML as its templating engine. But, it also supports other string-based templating. Templating allows applications to render views that are modular and reusable. With Knockout.js, one can perform DOM or string-based templating for modularizing views and rendering them in a programmed way.

  • Knockout.js also allows creating .templates to render HTML for a single element or for every element in an array. This makes code organization pretty neat

Picture2

3. Declarative Binding

  • Client-side JavaScript programming with business applications and REST services often involves constructing client-side HTML to display data to the users. Most of the JavaScript developers rely on using jQuery on client-side to generate HTML. This often results in writing a huge length of complex code.

  • Knockout.js is quite useful since it allows embedding data binding expressions in your HTML. It allows associating DOM elements with model data using a simple syntax. Knockout.js is a data-binding library and it allows you to create custom bindings inside data-bind. Moreover, it offers declarative binding to connect parts of your UI to your data model.

  • In short, Knockout.js allows implementing custom behaviors as new declarative bindings for easy reuse in just a few lines of code.

4. Two-way Data Binding

  • Its two-way data binding mechanism between data model and UI means that any changes done to the data model are automatically reflected in the UI and vice versa. UI elements of an HTML page reflect changes done to the Data Model by updating DOM automatically. Moreover, Knockout.js allows managing the relationships between the view components.

Picture3.jpg

5. Dependency Tracking

  • Knockout.js automatically tracks dependencies and updates the right parts of the user interface. It offers a simple way to manage complex, data-driven interfaces without relying on or writing event handlers and listeners for dependency tracking.

  • Observables are the core essence of Knockout.js. They are JavaScript objects notifying subscribers about changes and automatically detecting dependencies.

  • In Knockout.js, computed observables are used to define data fields. Declarative bindings are simply implemented as computed observables. So, when a binding reads the value of an observable, it causes the binding to re-evaluate if the observable changes.

6. Open-source

  • Knockout.js is a free and open-source project maintained by Steve Sanderson. Though, it is backed by a small community of developers, Knockout.js is steadily increasing in popularity. There is a huge collection of online tutorials, app examples and documentation on its website. Moreover, you can also find information on web development with Knockout.js on Stack Overflow.

7. No Dependencies

  • Knockout.js has no dependencies and it works without jQuery, Prototype.js or any other JavaScript library. It is trivially extensible and supports multiple browsers, such as Internet Explorer, Firefox, Safari, Google Chrome and Opera

Headline features :

Elegant dependency tracking – automatically updates the right parts of your UI whenever your data model changes.

Declarative bindings – a simple and obvious way to connect parts of your UI to your data model. You can construct a complex dynamic UIs easily using arbitrarily nested binding contexts.

Trivially extensible – implement custom behaviors as new declarative bindings for easy reuse in just a few lines of code.

Additional benefits:

Pure JavaScript library – works with any server or client-side technology

Can be added on top of your existing web application without requiring major architectural changes

Compact – around 13kb after gzipping

Works on any mainstream browser (IE 6+, Firefox 2+, Chrome, Safari, Edge, others)

Comprehensive suite of specifications (developed BDD-style) means its correct functioning can easily be verified on new browsers and platforms

Knockout VS jQuery

 

 

Knockout.js is not a replacement of jQuery, Prototype, or MooTools. It doesn’t attempt to provide animation, generic event handling, or AJAX functionality (however, Knockout.js can parse the data received from an AJAX call). Knockout.js is focused only on designing scalable and data-driven UI. Moreover Knockout.js is compatible with any other client-side and server-side technology. Knockout.js acts as a supplement to the other web technologies like jQuery, MooTools.

MVVM Design Pattern

Knockout.js uses a Model-View-ViewModel (MVVM) design pattern in which the model is your stored data, and the view is the visual representation of that data (UI) and ViewModel acts as the intermediary between the model and the view.

Actually, the ViewModel is a JavaScript representation of th
e model data, along with associated
functions for manipulating the data. Knockout.js creates a direct connection between the ViewModel and the view, which helps to detect changes to the underlying model and automatically update the right element of the UI.

 

 

How do you use it?

As soon as your UI gets nontrivial and has a few overlapping behaviors, things can get tricky and expensive to maintain if you only use jQuery. Consider an example: you’re displaying a list of items, stating the number of items in that list, and want to enable an ‘Add’ button only when there are fewer than 5 items. jQuery doesn’t have a concept of an underlying data model, so to get the number of items you have to infer it from the number of TRs in a table or the number of DIVs with a certain CSS class. Maybe the number of items is displayed in some SPAN, and you have to remember to update that SPAN’s text when the user adds an item. You also must remember to disable the ‘Add’ button when the number of TRs is 5. Later, you’re asked also to implement a ‘Delete’ button and you have to figure out which DOM elements to change whenever it’s clicked

How is Knockout different?

It’s much easier with KO. It lets you scale up in complexity without fear of introducing inconsistencies. Just represent your items as a JavaScript array, and then use a foreach binding to transform this array into a TABLE or set of DIVs. Whenever the array changes, the UI changes to match (you don’t have to figure out how to inject new TRs or where to inject them). The rest of the UI stays in sync. For example, you can declaratively bind a SPAN to display the number of items as follows:

There are myItems().length”> items

That’s it! You don’t have to write code to update it; it updates on its   own when the myItems array changes. Similarly, to make the ‘Add’   button enable or disable depending on the number of items, just write:

                           <button data-bind=”enable: myItems().length < 5″>Add

Examples:

  • To create a view model with KO, just declare any JavaScript object. For example,

  var myViewModel = {

      personName: ‘Bob’,

        personAge: 123

  • You can then create a very simple view of this view model using a declarative binding. For example, the following markup displays the personName value:

The name is

  • To activate Knockout, add the following line to applyBindings do:

    1. The first parameter says what view model object you want to use with the declarative bindings it activates

    2. Optionally, you can pass a second parameter to define which part of the document you want to search for data-bind attributes. For example,

    ko.applyBindings(myViewModel, document.getElementById(‘someElementId’))

    Observables

    • you’ve seen how to create a basic view model and how to display one of its properties using a binding. But one of the key benefits of KO is that it updates your UI automatically when the view model changes. How can KO know when parts of your view model change? Answer: you need to declare your model properties as observables, because these are special JavaScript objects that can notify subscribers about changes, and can automatically detect dependencies.

    • For example, rewrite the preceding view model object as follows:

    var myViewModel = {

    personName: ko.observable(‘Bob’),

    personAge: ko.observable(123)

    };

    • You don’t have to change the view at all – the same data-bind syntax will keep working. The difference is that it’s now capable of detecting changes, and when it does, it will update the view automatically.

    Reading and writing observables

    • Not all browsers support JavaScript getters and setters (* cough * IE * cough *), so for compatibility, ko.observable object are actually functions.

    • To read the observable’s current value, just call the observable with no parameters. In this example, myViewModel.personName() will return ‘bob’ and myViewModel.personAge() will return 123.

    • To write a new value to the observable, call the observable and pass the new value as a parameter. For example, calling myViewModel.personName(‘Mary’) will change the name value to ‘Mary’.

    • To write values to multiple observable properties on a model object, you can use chaining syntax. For example, myViewModel.personName(‘Mary’).personAge(50) will change the name value to ‘Mary’ and the Age value to 50.

Related Blogs