Ans: 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.
Ans:
Ans:
Ans: 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)’.
Ans: The Observable is a KnockoutJs property that contains the view model and this property is bind with UI (View) in two way binding.
Ans: The Computed observable is a KnockoutJs function which is depends on the other observable properties. Computed function are automatically update when any changes on these dependencies.
Ans: 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.
Ans: 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.
Ans: 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”’.
Ans: 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.
Ans: There are different types of data bindings and its looks like-
Ans: 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.
Ans: Data can be serialised to JSON using ko.toJSON(viewModel), and to a simple JavaScript object using ko.toJS(viewModel).
Ans: 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.
Ans: 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.
Ans: When we create custom binding, we need to add a property with your custom binding name and assign an object with two callback functions.
Registering your binding - To register a binding, adds it as a sub property of “ko.bindingHandlers” and its looks like.
ko.bindingHandlers.myCustomBinding = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// Set up any your initial state, event handlers, and so on
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
// Update the DOM element based on the supplied values.
}
};
DOM elements –
<div data-bind="myCustomBinding : yourValue"> </div>
Ans: 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.
Ans: 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.
Ans: Use the remove or removeAll methods, passing in the item you want to match for deletion.
Ans: 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.
Ans: 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.