Knockout – A comparative study against AngularJS

September 14, 2018

Knockout js is a Javascript library which follows MVVM(Model-View-ViewModel) architectural pattern. Unlike the AngularJS framework, the knockout is a library. The structuring of your application is entirely up to you when using KnockoutJS whereas the framework does it for you while using AngularJS. AngularJS follows MVC architectural pattern where Knockout follows the MVVM architectural pattern. The latest Angular frameworks from Angular 2 to Angular 8 follows CBA(component-based architecture.Each component individually follows MVC architecture).

Now let us see how AngularJS follows the MVC architecture.

Model – The model represents and holds application data.

Controller – The part of MVC which helps in the interactions between the Model and View. The user uses the controller. The controller manipulates the model. It is in the controller that we apply the necessary logic to our data and manipulates the model so that the change in data is reflected in the view.

View – Represents what the user sees. The view gets updated when the controller manipulates the model.

In AngularJS,$scope indicates the model. If we add a new $scope.firstname in the controller,  firstname is the model property and {firstname}} { binds the model to the view

{{firstname}} – This is a type of data binding called interpolation called. This bit of code inside the view file binds the view and model property firstname.

step 1 The user uses the controller function bound on ngClick to change the firstname.

step 2 Controller manipulates the model on the click of the button. scope.firstname indicates the model. The view gets updated as the view and model are bound.

Knockout and MVVM

KnockoutJS has MVVM architecture. So the controller in MVC is replaced by a modelView.MVVM separates the underground business logic of our application from the GUI. The sole role of the ViewModel is to bind the data between the view and the data model. When we work with AngularJS, our complete application flow is controlled by Angular.js including routing to various states. As knouckout.JS is not a framework, it only manages the binding of the data between model and view and nothing more.

Model – The model represents and holds application data.

View – Represents what the user sees. Views and models are bound together by modelView.

Modelview – Binds model and view. Handles our visual Logic only

Binding –  Knockout and AngularJS

1 Two-way binding – The type of binding we do for input boxes(ng-model)

2 Interpolation – Displaying data using double braces – {{name}}

3 Event Binding – For browser events – ngClick

4 One way binding – One-way data binding in AngularJS means binding data from Model to View (Data flows from the scope/controller to the view). ‘ng-bind’ is an angular directive used for achieving one-way data binding
Example ng-bind-html

 

Two way binding in knockout

knockout.JS binds a text field and corresponding model in the following way.

ko.observable is for detecting changes, and when it does, it will update the view automatically.AppViewModel is our model and we create a new instance of that model and provide it to the applyBindings function of knockout.
Knockout provides if, foreach, visibile for ng-if ,ng-repeat and ng-show in AngularJS

 

Interpolation

We can use data-bind text,data-bind html to achieve interpolation binding results while using knockout.js.If you insist on using the same syntax used by Angular.js, from knockout 3.0.0, you can use a plugin called punches to print data in – {{ data }} format.

Event Binding with knockout

In AngularJS we use ng-click to bind the click event to the HTML. When using knockout js,

One way binding

Data from model to view only. The change in view will no reflect in the model. One of the example in AngularJS is
the HTML binding using ng-bind-html or ng-bind
For achieving similar types of binding in Knockout.js, we can use data-bind=”html: details”
The HTML binding causes the associated DOM element to display the HTML specified by your parameter.

Creating a demo application with knockout

first, create an HTML file for your application  subscribe.html

Now create the ViewModel file subscribe.js

See knockout  documentation here

Knockout

 

 

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *