Knockoutjs

About demo : Knockoutjs and Ocelotds...

This is demonstration improved from the web site of knockoutjs.
With Ocelot your front-end application communicate elegantly with your java back-end

Compare them from knockout website and see the beautifull of Ocelotds.

Hover the mouse  highlighted code  and get infos about it

Choose a ticket class:

You have chosen ($)

@ApplicationScoped
@DataService(resolver = Constants.Resolver.CDI)
public class TicketServices {
   private List<Ticket> tickets;
   @PostConstruct
   private void init() {
      tickets = new ArrayList<>();
      tickets.add(new Ticket("Economy", 199.95));
      tickets.add(new Ticket("Business", 449.22));
      tickets.add(new Ticket("First Class", 1199.99));
   }
   public List<Ticket> getTickets() {
      return tickets;
   }
}
				

public class Ticket {
   private String name;
   private double price;
   public Ticket(String name, double price) {
      this.name = name;
      this.price = price;
   }
   public Ticket() {
   }
   public String getName() {
      return name;
   }
   public void setName(String name) {
      this.name = name;
   }
   public double getPrice() {
      return price;
   }
   public void setPrice(double price) {
      this.price = price;
   }
}
					
function TicketsViewModel() {
   var ticketServices = new TicketServices();
   var model = this;
   model.tickets = ko.observableArray([]);
   model.chosenTicket = ko.observable();
   model.resetTicket = function () {
      this.chosenTicket(null);
   };
   var onFault = function (fault) {
      alert(fault.message + "\n" + fault.classname + "\n" + fault.stacktrace.join('\n'));
   };
   model.loadTickets = function () {
      ticketServices.getTickets().then(function (tickets) {
         model.tickets.remove(function(item) { return true;});
         for (var key in tickets){
            model.tickets.push(tickets[key]);
         }
      }).catch(onFault);
   };
   model.loadTickets();
}
ko.applyBindings(new TicketsViewModel(), document.getElementById("liveExample"));

<div id="liveExample">
   <p>
      Choose a ticket class:
      <select data-bind="options: tickets, optionsCaption: 'Choose...', optionsText: 'name', value: chosenTicket"></select>
      <button data-bind="enable: chosenTicket, click: resetTicket">Clear</button>
   </p>                   
   <p data-bind="with: chosenTicket">
      You have chosen <b data-bind="text: name"></b>
      ($<span data-bind="text: price"></span>)    
   </p>
</div>