Knockout Lists

Tutorials of (Knockout lists) by Ruslan marin

<!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>
/* Downloaded from https://www.codeseek.co/ */
table {
    background-color: lightgreen;
}

.centered {
    text-align: center;    
}
/* Downloaded from https://www.codeseek.co/ */
// Конструктор блюда
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());

This awesome code ( Knockout Lists ) is write by Ruslan Marin, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Ruslan Marin