Knockout.js Client for Java EE RESTful Web Service

DZone 's Guide to

Knockout.js Client for Java EE RESTful Web Service

· Java Zone ·
Free Resource

Once a RESTful web service has been published, multiple approaches can be taken to consume the data exposed by the service. Let's take Knockout as a JavaScript framework for consuming a RESTful web service.

Here's all that's needed, in a file named 'app.js', to consume a RESTful web service via Knockout. In this case, the RESTful web service provides a 'name' and a 'city' which, below, via declarative UI bindings are made available to the view:

MyCustomerViewModel = function() {
    var self = this;
    self.customers = ko.observableArray();
        then(function(customers) {
            $.each(customers, function() {
                    name: ko.observable(this.name),
                    city: ko.observable(this.city)
ko.applyBindings(new MyCustomerViewModel());

Related reading:

And here's the view, notice the 'data-bind' attributes that connect the view to the JavaScript file above.

        <title>Customer Data</title>
        <table border="1">
            <tbody data-bind="foreach: customers">
                    <td data-bind="text: name"/>
                    <td data-bind="text: city"/>
        <script src="js/libs/knockout/knockout-min.js" type="text/javascript"></script>
        <script src="js/libs/jquery/jquery.js" type="text/javascript"></script>
        <script src="js/app.js" type="text/javascript"></script>

Finally, below, you see the working environment for creating the application described above, together with the result in the embedded browser of NetBeans IDE. Click to enlarge the image.

How to automate this process is described here: Knockout Client Generator for RESTful Web Services 


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}