Category Archives: knockout

knockout

KnockoutJS – Visible Binding

Leave a comment

As the name specifies this binding makes the related DOM element to be visible or hidden based on the value passed in the binding.

Syntax

visible: <binding-condition>

Parameters

When the parameter transforms into false (like false/0/null/undefined), then the binding sets display:none for the element to making it as hidden.

When the parameter transforms into true (true/non-null/array ), the binding removes the element’s display value and makes it visible.

Example

<html>
<head>
<title>KnockoutJS Computed Observables</title>
<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.4.2.js"></script>

</head>
<body>
<a href="#" data-bind="click: toggleVisibility">Show/Hide Text</a>
<br/><br />
<div data-bind="visible: shouldShowMessage">
Welcome To Dotnet-helpers.com Learning Curve
</div>

<script type="text/javascript">
var viewModel = function () {
this.shouldShowMessage = ko.observable(true);
this.toggleVisibility = function () {

this.shouldShowMessage(!this.shouldShowMessage());
alert('shouldShowMessage status ' + this.shouldShowMessage());
};

};
ko.applyBindings(new viewModel());
</script>

</body>
</html>

OUTPUT

 

What do you think?

I hope you have idea of how to use KnockoutJS visible or hidden based on the value passed in the binding. I would like to have feedback from my posts readers. Your valuable feedback, question, or comments about this article are always welcome.

knockout

KnockoutJS – Controlling text and appearance

Leave a comment

The “text” binding

The text binding causes the associated DOM element to display the text value of our parameter. This is used in text-level DOM elements such as div,span. The text binding accepts any data type and parses it into String before rendering it.

Syntax:

text: <binding-value>

Parameters

  • Knockout sets the element’s content to a text node with your parameter value. And if there is any previous content then it will be overwritten.
  • If this parameter is an observable value, then the binding value will update the element’s text whenever the value changes.  If the parameter isn’t observable then it will only set the element’s text once and will not update again.

Example

<html>
<head>
<title>KnockoutJS Computed Observables</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
</head>
<body>
<span data-bind="text: myMessage1"></span><br /><br />
<span data-bind="text: myMessage"></span>

<script type="text/javascript">
var MyModel = {
myMessage: ko.observable("myMessage: IntialMessage"),
myMessage1: ko.observable("IntialMessage - Welcome to dotnet-helpers.com")
};

MyModel.myMessage("myMessage1 : Welcome to KO Learning curve session");
ko.applyBindings(MyModel);
</script>
</body>

OUTPUT

 

What do you think?

I hope you have idea of Controlling text and appearance. I would like to have feedback from my posts readers. Your valuable feedback, question, or comments about this article are always welcome.

 

knockout

KnockoutJS – Environment Setup

Leave a comment

It’s very easy to use KnockoutJS in our project by Simply referring the KnockoutJS Javascript file within the <script > tag in HTML pages like other script reference. We can access the Knockout.js in different ways like below

Referring Internally:

We can download latest version of the Knockout.js from its official website and add to our solution for making reference within out project.

<script type='text/javascript' src='knockout-3.3.0.js'></script>

Referring Externally:

We can refer the KnockoutJS library from CDNs and this can be achieved by following way.

Refering from KnockoutJS library from Microsoft Ajax CDN like below.

<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>

In another way can refer to a minified version of KnockoutJS library from CDNJS as below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js" type="text/javascript"></script>

 

What do you think?

I hope you have idea of how to setup KnockoutJS in our Application. I would like to have feedback from my posts readers. Your valuable feedback, question, or comments about this article are always welcome.

knockout

Knockout VS jQuery

Leave a comment

Need to compare Knockout with jQuery?

Actual answer for above question is “NO”. Knockout.js is not a replacement of jQuery, Prototype etc.,. It doesn’t target to provide animation or AJAX functionality (Knockout.js can parse the data which received from an AJAX request). Knockout.js is focused only designed on data-driven UI. It is compatible with other client-side and  server-side technology.

Knockout.js uses a Model-View-ViewModel (MVVM) design pattern. In this, the model is react as data from back-end/business logic and the view is the visual representation of that data (UI) which is visible to the user and ViewModel acts as the intermediary between the model and the view.

In simple we can say the ViewModel is a JavaScript representation of the 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 from the mode and automatically update to the all the required changes in UI, in same way the update made in UI will automatically update to the model by the help of view model.

How to use Knockout ?

Simply reference to be made for the knockout file using a <script> tag in our your HTML pages. Let see below example,

<script type=’text/javascript’ src=’knockout-3.4.2.js’></script>

knockout

What is Knockout.js and how is it differ from jQuery?

Leave a comment

What is Knockout JS?

Knockout is a JavaScript library that helps you to create rich, responsive UI and with clean data model. In other word, It is a javascript library that allows us to bind html elements against any data model. It provides a simple two-way data binding mechanism between our data model and UI.

Why Knockout?

The User interface(UI) data section will update dynamically when any changes had updated by user’s action or any external data update the Knockout is the best solution for simple to handle it. Its provide a simple mechanism to handle out data model and UI. For example if any changes made on data model are automatically it will reflect in the DOM(User Interface) and if any changes to on the DOM will automatically reflected to the data model.

With Simple Real time example

Let we discuss about with simple shopping cart Interface. If user add an item in the shopping cart, then it need to have to add the items from the data model and add the associated html element to the shopping cart. Finally the total price need to update in the UI. Consider the same scenario for the delete operation, same need to be update in all the scenario. So if we are not using knockout for doing this, then we need to write event handlers and listeners for dependent.

Let we conclude, the knockout will track all dependencies between the HTML and their underlying data and update dynamically(automatically) when update has made by user or from the back-end (update made by system side).

How is Knockout differ?

We all loves jQuery for its excellent way to manipulate elements and event handlers in a web page. But KO is solves a different problem. It is not a replacement of jQuery or other framework. It not target to provide animation, AJAX functionality or generic event handling. It is focused only on designing salable and data-driven interface.

knockout

Knockout js Features

Leave a comment

KnockoutJS was developed and is maintained as an open source project by Steve Sanderson, a Microsoft employee on July 5, 2010. KO is basically a library written in JavaScript, based on MVVM pattern that helps developers build responsive and rich websites. The model separates the application’s Model, View (UI) and View Model (JavaScript Representation of model). Let we discuss about features of KO.

Features of KnockoutJS

Elegant Dependency Tracking

Knockout automatically updates the right parts of your UI whenever your data model changes. You no need to worry about adding event handlers and listeners for dependency tracking like in Jquery.

Extensible

This implements custom behaviors as new declarative bindings for easy reuse in just a few lines of code. KnockoutJS is independent of any other framework and it is compatible with other client or server side technologies.

Templating

Knockout can use alternative template engines for its template binding. Knockout has a native, built-in template engine which you can use right away and can be customize how the data and template are executed to determine the resulting markup.

Benefits of KO

If we implement KO with your web application then we can get the following benefits:

  • Easily we can create complex dynamic data model.
  • Anytime we can connect UI elements with data model which is synchronized.
  • Automatically UI will update when Data Model is changed. If any UI changed by user or in back-end then Data Model will change automatically.
  • It support event-driven programming model.
  • It mainly support all the browsers(Internet Explorer, FireFox, Crome, Safari).

KO with MVVM

What is MVVM?, the full form of MVVM is Model View ViewModel. It is an architectural design pattern designed by Microsoft and mainly created for WPF/Silverlight applications. KO builts on MVVP architectural design pattern. So if you want to understand KO properly, then you should know about MVVM.

Overview of MVVM:

MVVM stands for Model,View, ViewModel.

Model: Responsible for holding Application data. In simple, its refers either to a domain model or to the data access layer, which represents content

View: Responsible for presenting model data to the user. Its nothing but a User Interface which is getting information from the user.

ViewModel: Connector of Model and View. Main responsibility is to establish communication with View and Model. It holds data and function.Functions manipulate that data and it reflect to the UI. When data is changed in UI by the user, then data will be changes.If data is changed by the back-end then the UI will change accordingly. ViewModel will do it for us with the help of data-binding concept.

knockout js mvvm

practice knockout

MVVM Benefits

  • Provide more flexibility of designer and developer works.
  • The ViewModel is easier to unit test than code-behind or event-driven code.
  • Provide flexibility to change user interface without having to re-factor other logic of the code base
  • The presentation layer and the logic is loosely coupled.