Knockout Lists

What is a knockout lists How do you make a knockout lists? This script and codes were developed by Ruslan Marin on 10 February 2022, Thursday.

How do I make an knockout lists?
  1. Knockout Lists Previews
  2. Knockout Lists HTML Codes
  3. Knockout Lists CSS Codes
  4. Knockout Lists JS Codes
Knockout Lists Previews

Knockout Lists HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Knockout Lists</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <h2>Заказы (<span data-bind="text: seats().length"></span>)</h2>

<table>
    
    <thead>
        <tr>
            <th>Client name</th>
            <th>Meal</th>
            <th>Surcharge</th><th></th>
        </tr>
    </thead>

    <tbody data-bind="foreach: seats">
        <tr>
            <td>
                <input data-bind="value: clientName" />
            </td>
            <td class="centered">
                <select data-bind="options: $root.menu, value: meal, optionsText: 'name'"></select>
            </td>
            <td data-bind="text: meal().formattedPrice" class="centered"></td>
            <td><a href="#" data-bind="click: $root.removeSeat, text: 'Remove'"></a></td>
        </tr>
    </tbody>
    
</table>

<button data-bind="click: addSeat, enable: seats().length < 5">Reserve another seat</button>

<h3 data-bind="visible: total() > 0">
    Итого: <span data-bind="text: '$' + total().toFixed(2)"></span>
</h3>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

Knockout Lists CSS Codes

table {
    background-color: lightgreen;
}

.centered {
    text-align: center;    
}

Knockout Lists JS Codes

// Конструктор блюда
function Meal(name, price) {
    var self = this;
    self.name = name;
    self.price = price;
    self.formattedPrice = ko.computed(function(){
        return self.price ? "$" + self.price.toFixed(2) : "-";
    });    
}

// Конструктор заказа
function SeatReservation(name, initialMeal) {
    var self = this;
    self.clientName = name;
    self.meal = ko.observable(initialMeal);
}

// viewmodel с информацией о заказах
function ReservationsViewModel() {
    var self = this;

    // Меню
    self.menu = [
        new Meal("Standard (sandwich)", 0 ),
        new Meal("Premium (lobster)", 34.95 ),
        new Meal("Ultimate (whole zebra)", 290 ),        
    ];    

    // Начальные заказы
    self.seats = ko.observableArray([
        new SeatReservation("Lisa", self.menu[0]),
        new SeatReservation("Bart", self.menu[1]),
        new SeatReservation("Homer", self.menu[2])
    ]);
    
    self.addSeat = function() {
        self.seats.push(new SeatReservation("", self.menu[0]));
    };
    
    self.removeSeat = function(seat) {
        self.seats.remove(seat);
    };
    
    self.total = ko.computed(function(){
        var total = 0;
        for (var i = 0; i < self.seats().length; i++) {
            total += self.seats()[i].meal().price;
        }
        return total;
    });
}

ko.applyBindings(new ReservationsViewModel());
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.