Learning KnockoutJS Using Questions and Answers !!!

This article serves as the reference for KnockoutJs constructs. However, it may help beginners in understanding basic KnockoutJs as well. You can refer to this article in case of interview as well.

What is KnockoutJs?

It is a standalone JavaScript implementation of the Model-View-ViewModel pattern with templates. The underlying principles are therefore:

• a clear separation between domain data, view components and data to be displayed
• the presence of a clearly defined layer of specialized code to manage the relationships between the view components

What are the Important Concepts in KnockoutJs?

• Declarative Binding: Easily associate DOM elements with model data using a concise, readable syntax
• Automatic UI Refresh: When your data model’s state changes, your UI updates automatically
• Dependency Tracking: Implicitly set up chains of relationships between model data, to transform and combine it
• Templating: Quickly generate sophisticated, nested UIs as a function of your model data

What are the Features of KnockoutJs?

• Declarative bindings
• Automatic UI refresh (when the data model’s state changes, the UI updates automatically)
• Dependency tracking
• Templating (using a native template engine although other templating engines can be used, such as jquery.tmpl)
• Small and lightweight
• No dependency

How Do You Define View-model in KnockoutJs?

function AppViewModel() {
    this.firstName = "KnockoutJs";
    this.lastName = "Framework";
}

// Activates knockout.js
ko.applyBindings(new AppViewModel());

How Do You Bind View-model with DOM Elements? How is Data-bind Attribute Used in KnockoutJs?

KnockoutJs provides data-bind attribute which lets you declaratively associate view-model properties with DOM elements. Below are some examples how you can bind the Dom elements with static/dynamic values.

<!-- Binds firstName of view-model to the <strong> element's text attribute -->
<strong data-bind="text: firstName"></strong>
<!-- Binds firstName of view-model to the <input> element's value attribute -->
<p>First name: <input data-bind="value: firstName" /></p>

What are Observables in KnockoutJs?

You can make your view-model observe the value of DOM element, it is bound to, using ko.observable method. Observable will automatically issue notifications whenever their value changes. It results in keeping view-model and the bound DOM element in sync.

function AppViewModel() {
    this.firstName = ko.observable("KnockoutJs");
    this.lastName = ko.observable("Framework");
}

What is Computed Property? How Does KnockoutJs Handle These?

There are scenarios where you combine two or more properties and make a new property that holds its value. KnockoutJs supports computed property using ko.computed method.

this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();
}, this);

Here, it is to note that firstName and lastName must be observable to create computed property. Things stay in sync because of automatic dependency tracking: Any changes ripple out through the object graph causing the minimal set of refreshes needed to bring your view-model and visible UI up-to-date.

How Can You Add Behaviours to the View-model?

Below is an example of adding custom behaviours to the view-model:

function AppViewModel() {
    // ... leave firstName, lastName, and fullName unchanged here ...

    this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };
}

You can call this newly added behaviour on click of any event as below:

<!-- This will call capitalizeLastName on click of this button -->
<button data-bind="click: capitalizeLastName">Go caps</button>

Can You Have Observable Array in KnockoutJs? If Yes, Can You Give an Example?

KnockoutJs provides observableArray which tracks any change to the value in the array. If you add/update/delete record in array, the UI (which is using these records) is regenerated. Below is an example of declaring an observable array:

// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);
}

// Editable data
self.seats = ko.observableArray([
    new SeatReservation("Steve", self.availableMeals[0]),
    new SeatReservation("Bert", self.availableMeals[0])
]);

What is foreach Binding? Can You Give An Example Which Uses It?

foreach binding is used to render list of items. Below is an example which uses foreach binding with observable array:

<tbody data-bind="foreach: seats">
    <tr>
        <td data-bind="text: name"></td>
        <td data-bind="text: meal().mealName"></td>
        <td data-bind="text: meal().price"></td>
    </tr>
</tbody>

Notice that because the meal property is an observable, it’s important to invoke meal() as a function (to obtain its current value) before attempting to read sub-properties. In other words, write meal().price, not meal.price.

How Can You Bind drop-down Options to a List Using KnockoutJs?

You can use data-bind > options of KnockoutJs to bind view-model list to drop-down as below:

self.availableMeals = [
    { mealName: "Standard (sandwich)", price: 0 },
    { mealName: "Premium (lobster)", price: 34.95 },
    { mealName: "Ultimate (whole zebra)", price: 290 }
];

<select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select>

Note: $root. prefix causes Knockout to look for a specified handler on your top-level view-model instead of on the current instance being bound.

Give an Example of Removing Item from Observable Array

You can create a remove link inside foreach binding under say <td> element.

<!-- This link is used inside foreach binding -->
<a href="#" data-bind="click: $root.removeSeat">Remove</a>

When you call removeSeat, KnockoutJs passes current record as parameter as below:

self.removeSeat = function(seat) { self.seats.remove(seat) }

How hash-based/pushState Navigation Works in Case of Single Page Application?

For hash-based navigation, the visitor’s position in a virtual navigation space is stored in the URL hash, which is the part of the URL after a ‘hash’ symbol (e.g.,/my/app/#category=shoes&page=4). Whenever the URL hash changes, the browser doesn’t issue an HTTP request to fetch a new page; instead it merely adds the new URL to its back/forward history list and exposes the updated URL hash to scripts running in the page. The script notices the new URL hash and dynamically updates the UI to display the corresponding item (e.g., page 4 of the “shoes” category).

This makes it possible to support back/forward button navigation in a single page application (e.g., pressing ‘back’ moves to the previous URL hash), and effectively makes virtual locations bookmarkable and shareable.

pushState is an HTML5 API that offers a different way to change the current URL, and thereby insert new back/forward history entries, without triggering a page load. This differs from hash-based navigation in that you’re not limited to updating the hash fragment — you can update the entire URL.

How Can You Access Values of Single Dimensional Array using foreach Binding?

You can access the values of single dimensional array using for foreach binding and $data construct. Below is an example:

<ul class="folders" data-bind="foreach: folders">
    <li data-bind="text: $data,
        css: {selected: $data == $root.chosenFolderId() },
        click: $root.goToFolder"></li>
</ul>

Here, it is to note that folders class add css to your list making it look better.

What is With Binding? Give an Example.

The with binding creates a binding context that will be used when binding any elements inside it. In the example given below, everything inside the <table> will be bound to chosenFolderData, so it’s not necessary to use chosenFolderData. as a prefix before mails.

<table class="mails" data-bind="with: chosenFolderData">
    <thead><tr><th>From</th><th>To</th><th>Subject</th><th>Date</th></tr></thead>
    <tbody data-bind="foreach: mails">
        <tr>
            <td data-bind="text: from"></td>
            <td data-bind="text: to"></td>
            <td data-bind="text: subject"></td>
            <td data-bind="text: date"></td>
        </tr>
    </tbody>
</table>

What is Binding in KnockoutJs? Can We Create Custom Bindings in KnockoutJs? If Yes, How?

In Knockout, bindings are what join your view and view-model together. Bindings are the intermediaries; they perform updates in both directions:

• Bindings notice view-model changes and correspondingly update the view’s DOM
• Bindings catch DOM events and correspondingly update view-model properties

Knockout has a flexible and comprehensive set of built-in bindings (e.g., text, click,foreach etc.), but it’s not meant to stop there – you can create custom bindings in just a few lines of code. In any realistic application, you’ll find it beneficial to encapsulate common UI patterns inside bindings, so those patterns can trivially be reused in multiple places.

Let's Define A Custom Binding Now…

You can define a custom binding by assigning a new property to the ko.bindingHandlers object. Your property can expose two callback functions:

• init - to be called when the binding first happens (useful to set initial state or register event handlers)
• update - to be called whenever the associated data updates (so you can update the DOM to match)

ko.bindingHandlers.fadeVisible = {
    init: function(element, valueAccessor) {
        // Start visible/invisible according to initial value
        var shouldDisplay = valueAccessor();
        $(element).toggle(shouldDisplay);
    },
    update: function(element, valueAccessor) {
        // On update, fade in/out
        var shouldDisplay = valueAccessor();
        shouldDisplay ? $(element).fadeIn() : $(element).fadeOut();
    }
};

Hope it helps you guys in refreshing KnockoutJs concepts, or Interview. Your suggestions are always welcome to make this blog more helpful.

---

References

• KnockoutJs Home
• KnockoutJs Tutorial & Practice