Restful Spring Knock Out JS JQuery AutoComplete

                          Restful Spring Knock Out JS  JQuery AutoComplete

Knockout is a JavaScript library that makes it easier to create rich, desktop-like user interfaces with JavaScript and HTML, using observers to make your UI automatically stay in sync with an underlying data model. It works particularly well with the MVVM pattern, offering declarative bindings.

MVVM  Pattern :

MVVM (Model View ViewModel) is an architectural pattern based on MVC and MVP, which attempts to more clearly separate the development of user-interfaces (UI) from that of the business logic and behaviour in an application.

Features of Knockout Js :

1. Automatic Dependency Tracking :

        At the heart of Knockout is a system of observable variables and other variables computed as functions of them. If you have firstName and lastName and then define fullName by concatenating these together, the framework knows that whenever either firstName or lastName changes, it must re-evaluate fullName. 

2. Declarative Binding :

       By adding a data-* attribute we can quickly bind appearance and behaviour in your HTML to properties on a view model.

e.g.

<text data-bind="text: fullName"></span>, and then the element will display the value in your model property as text, automatically updating if any of the underlying data changes.

e.g.

function ViewModel() {

    this.firstName = ko.observable("Satya");

    this.lastName = ko.observable("Jena");

    this.fullName = ko.computed(function() {

        return this.firstName() + " " + this.lastName();

    }, this);

}

ko.applyBindings(new ViewModel());

Benefits :

1. Standalone / Pure JavaScript.

2. Open Source.

3. Wide Browser Support.

Benefits :

4. Reusability.

5. View Consistency.

6. Concise Code.

Use Cases :

7. Web Apps.

8. User Interaction.

9. AJAX/API Backed.

Model - View - View Model (MVVM) :

MVVM stands for Model View ViewModel. This pattern supports two way data binding between view and view model. This enables automatic propagation of changes with in the state of the ViewModel  to view.

Typically ViewModel uses Observer pattern to notify changes in ViewModel to model.

Model :

The Model represents a set of classes that describes the business logic and data. It also defines business rules for data means how the data can be changed and manipulated.

View :

The View represents the UI components like CSS, jQuery, html, JSP etc. It is only responsible for displaying the data that is received from the controller as the result. This also transforms the model(s) into UI.

A KnockoutJS View is simply a HTML document with declarative bindings to link it to the ViewModel. KnockoutJS Views display information from the ViewModel, pass commands to it (e.g a user clicking on an element) and update as the state of the ViewModel changes. 

View Model :

The View Model is responsible for exposing methods, commands, and other properties that helps to maintain the state of the view, manipulate the model as the result of actions on the view, and trigger events in the view itself.

The ViewModel can be considered a specialized Controller that acts as a data converter. It changes Model information into View information, passing commands from the View to the Model.

The ViewModel may also expose methods for helping to maintain the View's state, update the model based on the action's on a View and trigger events on the View.

Observe Design Pattern :

The Observer design pattern defines a one-to-many dependency between a subject object and any number of observer objects, so that when the object changes state, all its observer objects are notified and updated automatically.

Observables :

Observables are special JavaScript objects that can notify subscribers about changes and automatically detect dependencies. This allows us to synchronize Models and ViewModels when the value of a Model attribute is modified.

1. The Observable pattern is used to decouple objects that need to know details about the state of other objects. 
2. It does this by using events. When the state of the subject changes, the subject will fire an event. 
3. Subscribers to that particular event on the subject will then be notified that the state change has occurred. 
4. Many Ext classes extend Observable to allow for a flexible, decoupled programming model.

Computed Observables :

Computed observables will create properties that are dynamically generated. This means you can combine several normal observables into a single property, and Knockout.js will still keep the view up-to-date whenever any of the underlying values change.

ViewModel :

var PersonViewModel(){

this.fullName = ko.computed(function() {

  return this.firstName() + " " + this.lastName();

}, this);

var vm = new PersonViewModel();

ko.applyBindings(vm);

vm.firstName("Babu");

}

Once we change the name to  it will Update the UI immediately.

View :

<p><span data-bind='text: fullName'></span></p>

Computed observables provide many of the same benefits as Knockout.js’ automatic synchronization of the view. 

Observable Arrays :

Observable arrays we will put list of items. Observable Array is just function wrapper around the JS array.

We can use the observableArray function to declare an observable array in our view model. We can either use ko.observableArray() to initialize an observable array with an empty array [] or pass in an already existing array.

var satyaObservableArray = ko.observableArray([

    { name: "Satya", type: "Jena" },

    { name: "Sharmistha", type: "Sahoo" },

    { name: "Sanjukta", type: "Jena" }

]);

We can add items to the observable array using push() method.

ModelAndView :

<script type="text/javascript">
  function workViewModel(){
     var self=this;
     this.Works=ko.observableArray([]);
         self.addwork = function(){
                                                         self.Works.push(
                                                                                {
                                                                                          name : "UI Design",
                                                                                          description : "JSP Change",
                                                                                          isComplete: false
                                                                                   }
                                                                           );
                                                  } 
                                     }

    ko.applyBindings(new workViewModel());
</script>

JSP :

<tBody data-bind="foreach:works">
        <tr>
              <td><span data-bind="text: name"></span></td>
              <td><span data-bind="text: description"></span></td>
              <td><span data-bind="text: isComplete"></span></td>
        </tr>
</tBody>

We can remove the items from the observable array using remove() method.

ModelAndView :

<script type="text/javascript">
  function workViewModel(){
     var self=this;
     this.Works=ko.observableArray([]);
         self.addWork = function(){
                                                         self.Works.push(
                                                                                {
                                                                                          name : "UI Design",
                                                                                          description : "JSP Change",
                                                                                          isComplete: false
                                                                                   }
                                                                           );
                                                  } 
         self.removeWork=function(){
                                                         self.Works.remove(work);
                                                          }
                                     }

    ko.applyBindings(new workViewModel());
</script>

I wll continue in next blog.....................