KnockoutJS Interview Questions

Introduction

KnockoutJS is being used more frequently in projects as a lightweight tool to assist quick development in the browser, especially where ViewModels and arrays are involved. Knockout is quick to learn and while it doesn’t have anywhere near the functionality of say AngularJS, it does provide a powerful mechanism for working with data and vastly reduces the amount of code needed to implement a robust modern, client-side solution. Unlike Angular, which encompasses many concepts including data-binding, integrated testing, view management, etc., Knockout only promises one thing – highly efficient data-binding, but it does this extremely well indeed. Due to its increasing popularity, questions about it are being asked at interviews – this is a list of some of the more common questions I have seen discussed in preparing interviews. If you understand these concepts, you will be well on your way to putting together a solid Knockout solution.

For simple working examples of Knockout, you can download examples from some of my other articles listed below:

• KnockoutJS nested arrays in MVC
• Searching, filtering and sorting with KnockoutJS in C# MVC
• User credential onboarding with KnockoutJS

(1) What is KnockoutJS ?

KnockoutJS is a JavaScript library that helps developers create modern, rich user interfaces with a clean underlying data model. Whenever you have a user-interface that needs to update when an underlying data model updates, then KnockoutJS is a useful tool that could be used. Steve Sanderson who works at Microsoft designed KnockoutJS. It is an open source project, and is used to power the front-end of the beautifully designed Azure control interface.

Designing large SPAs with KO:

• http://blog.stevensanderson.com/2014/06/11/architecting-large-single-page-applications-with-knockout-js

(2) Why is KnockoutJS useful ?

Knockout can dramatically reduce the amount of code needed to synchronize a data model and user interface controls. It is fast, cross browser compatible, and not reliant on any other libraries. It is lightweight (< 20kb after compression) and can be easily integrated with most web applications without any major architectural update.

(3) Describe a Knockout ViewModel

A Knockout ViewModel looks very much like a basic class that is created in JavaScript as a function. It is declared as a variable, and can have members and methods.

(4) How do you activate a Knockout Model ?

To activate a model, we call the key method ‘ko.applyBindings’, passing in the name of the model to bind to as a parameter. ‘ko.applyBindings(MyNewKOModel)’.

(5) Can you have multiple Knockout models on one page, and if so, how would you use them ?

Yes, Knockout can bind to multiple models at one time. The key to keeping the different models isolated is to put any mark-up in separate div containers, named with a unique ID, and to call the key ‘applyBindings’ method for each model, passing in the viewModel as the first parameter, and the matching div ID as the second parameter.

‘ko.applyBindings(MyFirstKOModel, document.getElementByID(‘firstDiv’))’.
‘ko.applyBindings(MySecondKOModel document.getElementByID(‘secondDiv’))’.

(6) What is two way data binding ?

Knockout uses the “data-*” tags to create a live dynamic link between a browser UI control, and a member or method inside a data ViewModel. If you have a data model with a field ‘FirstName’ and an edit box linked using the data-bind attribute to ‘FirstName’, then anytime the data model changes (for example programmatically), that change immediately shows in the edit box, and any time a user makes a change to the FirstName in the edit box, the underlying data in the field ‘FirstName’ is changed.

(7) What is an observable ?

In knockout, declaring a member as observable means when its value changes any other object watching the member gets notified it has been changed. This simple concept allows the two-way data-binding to be implemented.

(8) What is an observable array and give an example of where they are useful

Simply, it is an array of observable objects. Observable arrays can be when handling object collections such as the individual items in a shopping cart for example.

(9) What is a computed observable ?

This is a special type of function that is dependant on one or more observables to work. For example, when the one or more observable value the computed is linked to changes, the computed observable gets called. The classic example is a computed called ‘Full Name’ which observes and combines ‘first name’ and ‘last name’ to make ‘Full name’.

(10) How do you search or sort an observable array ?

You can search and sort using a ‘ko.Computed’ function. The computed function could implement an ‘arrayFilter’ call from the Knockout utils library to search, and a relevant compare (on string, number, date) for the sort. In all cases, the computed function filters out what it doesn’t want and returns data accordingly.

Article: Searching and sorting in KnockoutJS

(11) How do you prepare a Knockout object for data transfer ?

Data can be serialised to JSON using ko.toJSON(viewModel), and to a simple JavaScript object using ko.toJS(viewModel).

(12) What is the purpose of the mapping plugin ?

When loading data into a viewModel, if it is complex with nested arrays, it can be troublesome to unwrap all members manually. The mapping plugin assists with this and allows you to tell Knockout how to handle complex data like structures with nested arrays by providing pattern functions.

Article: KnockoutJS Arrays Mapping

(13) What is a binding, what are the binding types, and what are they used for ?

A binding is a html mark-up attribute that is added to an html element to create a link between the html control element and a knockout object. It takes the format ‘data-bind:<binding-type:value>’. There are binding types to assist with objects like control text, visibility and CSS styles, and other types to assist with form fields such as value, submit, event, etc. Bindings might be used to display the title label of a page, the visibility of a checkbox, and control the data entry in form field.

(14) How can you control flow with bindings ?

When you have an array of items in a Knockout viewModel, you can tell your mark-up to iterate through them using the data-bind ‘for-each’ for example.

(15) Give a benefit of using Knockout form binding

Normal functionality we might implement around form fields such as getting/setting the field value, hooking events, etc. can be carried out using ‘form data-bind’. A benefit of doing this is that we allow control of the form to be tied to the data model and its rules.

(16) How do you delete an item from a Knockout array ?

Use the remove or removeAll methods, passing in the item you want to match for deletion.

(17) How would you flag an item deleted and why is this useful ?

In cases where you want to manage an array of existing data for example browser-side, and inform the server of both additions, changes and deletions, you can flag an array item using the ‘destroy’ or ‘destroyAll’ method. This creates a dirty record that is flagged “_destroy” and can be easily identified server-side for handling in the data repository.

(18) How do you call a Knockout method using data bind concept ?

Knockout allows us to use the data-bind concept to hook into user control object events such as ‘click’. To do this, we use a ‘data-bind’ with the method we want to call as the click parameter ‘data-bind=”click: callSomeMethod”’.

(19) What is a use of templates in Knockout and how are they coded ?

Knockout allows us to use the data-bind concept to hook into user control object events such as ‘click’. To do this, Templates can provide different blocks of mark-up to be used for different view renderings. For example, to show mark-up with a required ‘State’ field for a US address, and a required ‘Town’ field for say a UK address. Mark-up for templates can be implemented using an external template view-engine, or by implementing the html inside a pseudo JavaScript block.

(20) Name two context properties in Knockout and explain their use

When working with arrays, the $index property returns the index of the current context item in the array. When working with nested objects, the $parent property allows us to examine the parent of an object, for example a customer may have many orders, an order may have many line items. The order is the parent of the line item, the customer is the parent of the order.

History

• 4th May, 2015 - Verison 1 created