Interview Questions.

KnockoutJS Interview Questions and Answers - Jul 14, 2022


KnockoutJS Interview Questions and Answers

Q1. What is KnockoutJS ?

Ans: KnockoutJS is a JavaScript library that enables developers create modern, wealthy user interfaces with a clean underlying facts version. Whenever you've got a person-interface that wishes to replace whilst an underlying statistics model updates, then KnockoutJS is a beneficial tool that could be used. Steve Sanderson who works at Microsoft designed KnockoutJS. It is an open source venture, and is used to power the front-stop of the beautifully designed Azure control interface.

Q2. How KnockoutJs exceptional from MVC?


KnockoutJs is a MVVM pattern.

KnockoutJs paintings like linked mode.

Knockout s supported  forms of binding.

1.One-way binding

2.Two-way binding.

In KnockoutJs, UI element routinely replace when your data model update.

In KnockoutJs, version component isn't directly bind with the view web page. Models at once bind with the view-model and view-model immediately with the view web page.

MVC is a layout sample.

MVC work like disconnected mode.

MVC supported best one-manner binding.

In MVC, not replace UI routinely when your information model replace. Need occasion to call facts version and update it.

In MVC, model parts at once bind with the view web page.

Q3. What Are the principle features of KnockoutJs?


Dependency Tracking - KnockoutJs make dependency among View and ViewModel. Its track the any modifications on based objects and it's miles automatically updating the UI (DOM) whilst your information fashions are alternate.

Declarative Binding - The Declarative Binding presents the approaches, your UI (DOM) is hooked up together with your records models in a without a doubt manner using control.

Template Binding– The Template bindings are used for construct sophisticated UI in effortlessly. It’s populate the DOM elements within the nested and repeating manner with the help of for-each, if, with, and different control glide bindings and 0.33 party template engine.

Automatic UI (DOM) Refresh – The KnockoutJs robotically refresh the UI (DOM) you’re your ViewModel replace. If any modifications came about in the ViewModel facts automatically refresh on view/UI/DOM.

Pure JavaScript library – The KnockoutJs works with any consumer-facet or server technology and it is without difficulty works with present internet application with none principal adjustments.

Compact Size – The KnockoutJs length is round 13kb. It is just too small and handy to apply.

Support All Modern Browsers– The KnockoutJs assist most of the modern browsers like -IE 6+, Firefox 2+, Chrome, Safari, others.

Q4. Why is KnockoutJS useful ?

Ans: Knockout can dramatically lessen the quantity of code needed to synchronize a data version and user interface controls. It is speedy, cross browser well matched, and not reliant on every other libraries. It is light-weight (< 20kb after compression) and may be without problems incorporated with most net packages with none principal architectural replace.

Q5. How do you activate a Knockout Model ?

Ans: To activate a model, we call the important thing technique ‘ko.ApplyBindings’, passing inside the call of the version to bind to as a parameter. ‘ko.ApplyBindings(MyNewKOModel)’.

Q6. What Is observable in Knockout JS?

Ans: The Observable is a KnockoutJs belongings that incorporates the view version and this assets is bind with UI (View) in two way binding.

Q7. What Is computed observable?

Ans: The Computed observable is a KnockoutJs characteristic which is depends on the other observable residences. Computed feature are mechanically replace when any changes on those dependencies.

Q8. Describe a Knockout ViewModel

Ans: A Knockout ViewModel seems very similar to a primary class that is created in JavaScript as a characteristic. It is said as a variable, and can have participants and techniques.

Q9. What is two manner statistics binding ?

Ans: Knockout uses the “records-*” tags to create a live dynamic link among a browser UI manipulate, and a member or technique inner a records ViewModel. If you have a statistics model with a discipline ‘FirstName’ and an edit field linked the usage of the facts-bind attribute to ‘FirstName’, then anytime the records model modifications (as an instance programmatically), that exchange right away indicates within the edit container, and any time a user makes a trade to the FirstName within the edit box, the underlying facts within the area ‘FirstName’ is changed.

HubSpot Video

Q10. How do you call a Knockout approach using information bind concept ?

Ans: Knockout allows us to use the records-bind idea to hook into user manage object occasions consisting of ‘click’. To do this, we use a ‘facts-bind’ with the technique we need to name as the click parameter ‘data-bind=”click: callSomeMethod”’.

Q11. What is a use of templates in Knockout and how are they coded ?

Ans: Knockout allows us to apply the data-bind idea to hook into person manipulate item events such as ‘click on’. To try this, Templates can provide distinctive blocks of mark-up to be used for exclusive view renderings. For instance, to expose mark-up with a required ‘State’ area for a US deal with, and a required ‘Town’ field for say a UK cope with. Mark-up for templates can be implemented the usage of an external template view-engine, or with the aid of imposing the html inner a pseudo JavaScript block.

Q12. What kinds of facts binding are to be had in knockout JS?

Ans: There are special styles of records bindings and its looks as if-

visible binding

textual content binding

value binding

css binding

style binding

attr binding

template binding

Q13. How do you seek or sort an observable array ?

Ans: You can seek and kind the usage of a ‘ko.Computed’ function. The computed feature may want to enforce an ‘arrayFilter’ name from the Knockout utils library to look, 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 information for that reason.

Q14. How do you prepare a Knockout item for data transfer ?

Ans: Data can be serialised to JSON the usage of ko.ToJSON(viewModel), and to a easy JavaScript object using ko.ToJS(viewModel).

Q15.  What is the motive of the mapping plugin ?

Ans: When loading statistics into a viewModel, if it's miles complex with nested arrays, it could be tough to unwrap all members manually. The mapping plugin assists with this and lets in you to tell Knockout the way to cope with complex statistics like systems with nested arrays by means of presenting sample features.

Q16. What is a binding, what are the binding kinds, and what are they used for ?

Ans: A binding is a html mark-up attribute that is added to an html detail to create a link between the html manage detail and a knockout item. It takes the format ‘data-bind:<binding-type:value>’. There are binding sorts to help with items like manipulate textual content, visibility and CSS styles, and different types to assist with shape fields including fee, submit, occasion, and so on. Bindings is probably used to show the name label of a page, the visibility of a checkbox, and manage the information access in form field.

Q17.  How To Creating Custom bindings in knockoutJs?

Ans: When we create custom binding, we need to feature a property together with your custom binding name and assign an object with two callback functions.

Registering your binding - To register a binding, provides it as a sub belongings of “ko.BindingHandlers” and its looks like.

Ko.BindingHandlers.MyCustomBinding = 

  init: function(detail, valueAccessor, allBindings, viewModel, bindingContext) 

      // Set up any your initial state, event handlers, and so on


  replace: characteristic(element, valueAccessor, allBindings, viewModel, bindingContext) 

      // Update the DOM detail primarily based at the furnished values.



DOM elements –

<div data-bind="myCustomBinding : yourValue"> </div>

Q18. How are you able to manipulate flow with bindings ?

Ans: When you've got an array of objects in a Knockout viewModel, you can tell your mark-up to iterate through them using the information-bind ‘for-each’ as an instance.

Q19.  Give a gain of the use of Knockout shape binding

Ans: Normal capability we'd enforce round form fields such as getting/placing the sphere cost, hooking occasions, and so forth. Can be carried out the usage of ‘form statistics-bind’. A gain of doing this is that we permit control of the form to be tied to the data version and its policies.

Q20. How do you delete an object from a Knockout array ?

Ans: Use the put off or removeAll techniques, passing in the item you want to match for deletion.

Q21. How might you flag an object deleted and why is this beneficial ?

Ans: In instances in which you want to manage an array of present information as an instance browser-aspect, and inform the server of both additions, modifications and deletions, you can flag an array object the use of the ‘wreck’ or ‘destroyAll’ technique. This creates a grimy file that is flagged “_destroy” and can be without difficulty identified server-facet for coping with within the data repository.

Q22. Name two context residences in Knockout and provide an explanation for their use

Ans: When working with arrays, the $index property returns the index of the modern context item in the array. When operating with nested objects, the $figure belongings lets in us to look at the parent of an item, for example a purchaser may have many orders, an order might also have many line objects. The order is the discern of the road object, the purchaser is the discern of the order.