Marko - knockout example

An example of a reservation system.

by Dejan Vasic

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div data-bind="foreach:seats">
  <button data-bind="text: label, click: toggle">
  </button>
</div>

<ul data-bind="foreach:selectedSeats">
  <li data-bind="text: seatNumber"></li>
</ul>

<button data-bind="click: reserveSeats">
  Save
</button>

<div data-bind="text: dataToSend"></div>

JavaScript

function Row(seats) {
  var me = this;
  me.seats = ko.observableArray();
  me.selectedSeats = ko.observableArray();

  for (i = 0; i < seats.length; i++) {
    var s = seats[i];
    s.onSeatSelected(seatSelected);
    this.seats.push(seats[i]);
  }

  function seatSelected(seat) {
    if (seat.selected()) {
      me.selectedSeats.push(seat);
    } else {
      me.selectedSeats.remove(seat);
    }
  }

  me.dataToSend = ko.observable();
  me.reserveSeats = function() {
    var data = ko.toJS(me.selectedSeats);
    
    var stringified = JSON.stringify(data);
    me.dataToSend(stringified);

    // Call PHP Server
    /*$.post('/api/reserve-seats', data)
      .then(function() {
        alert('Your seats have been reserved!')
      })
    	.error(function(){
      	alert('sorry, something went really bad on the server...');
      });*/
      
  }
}

function Seat(seatNumber) {
  var ja = this;
  var seatSelectedFunc;
  ja.label = ko.observable(seatNumber);
  ja.seatNumber = ko.observable(seatNumber);
  ja.selected = ko.observable();

  ja.toggle = function() {
    ja.selected(!ja.selected());

    if (ja.selected() === true) {
      ja.label(ja.label() + " - Reserved");
    } else {
      ja.label(ja.seatNumber());
    }

    seatSelectedFunc(ja);
  }

  ja.onSeatSelected = function(func) {
    seatSelectedFunc = func;
  }
}

var seatOne = new Seat("A1");
var seatTwo = new Seat("A2");
var row = new Row([seatOne, seatTwo]);

ko.applyBindings(row);