Блог

Главная - Вопросы по программированию - Наблюдаемая привязка с Knockout.JS

Наблюдаемая привязка с Knockout.JS

#javascript #html #knockout.js

#JavaScript #HTML #knockout.js

Вопрос:

Когда я запускаю эту HTML-страницу и нажимаю на какую-либо опцию в элементе выбора, значение price автоматически изменяется. Как это возможно? Можете ли вы объяснить функцию и какую роль elementvalue: meal, здесь играет значение выбора?

 <!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Working with Lists and Collections</title>

    <script type="text/javascript" src="knockout-3.1.0.debug.js"></script>

    <script type="text/javascript">
        function SeatReservation(name, initialMeal) {
            var self = this;
            self.name = name;
            self.meal = ko.observable(initialMeal);
        }

        // Overall viewmodel for this screen, along with initial state
        function ReservationsViewModel() {
            var self = this;

            // Non-editable catalog data - would come from the server
            self.availableMeals = [
                { mealName: "Standard (sandwich)", price: 0 },
                { mealName: "Premium (lobster)", price: 34.95 },
                { mealName: "Ultimate (whole zebra)", price: 290 }
            ];

            // Editable data
            self.seats = ko.observableArray([
                new SeatReservation("Steve", self.availableMeals[0]),
                new SeatReservation("Bert", self.availableMeals[0])
            ]);

            // Operations
            self.addSeat = function () {
                self.seats.push(new SeatReservation("", self.availableMeals[0]));
            }
        }
    </script>

</head>
<body>
    <div>
        <h2>Your seat reservations</h2>
        <table>
            <thead>
                <tr>
                    <th>Passenger name</th>
                    <th>Meal</th>
                    <th>Surcharge</th>
                    <th></th>
                </tr>
            </thead>
            <tbody data-bind="foreach: seats">
                <tr>
                    <td>
                        <input data-bind="value: name" /></td>
                    <td>
                        <select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"></select></td>
                    <td data-bind="text: meal().price"></td>
                </tr>
            </tbody>
        </table>
        <button data-bind="click: addSeat">Reserve another seat</button>
    </div>
    <script type="text/javascript">
        ko.applyBindings(new ReservationsViewModel());
    </script>
</body>
</html>

Ответ №1:

Вот как нокаут предназначен для работы. Я бы посоветовал просмотреть учебные пособия по Knockout, чтобы лучше понять это.

Но в ответ на ваш вопрос, ваш select установлен на display: $root.availableMeals , который представляет собой массив всех блюд, определенных:

 self.availableMeals = [
        { mealName: "Standard (sandwich)", price: 0 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
    ];

Каждый элемент в массиве имеет 2 свойства: mealName , которое является отображаемым значением в select и price , которое используется в Surcharge столбце. Отображаемое значение устанавливается с помощью: optionsText: 'mealName' .

Ваш пользовательский интерфейс позволяет выбрать опцию из этого списка, и выбор сохраняется с помощью: value: meal , который определяется как наблюдаемое резервирование для каждого места, определенное со значением по умолчанию: 

 self.meal = ko.observable(initialMeal);

Как только выбор сделан и это значение обновлено, knockout начинает работать со значением, отображаемым в Surcharge столбце.

Поскольку выбор блюд был обновлен, и это observable , цена автоматически изменяется, чтобы соответствовать выбору блюд, поскольку ваша привязка настроена на возврат price выбранного блюда для бронирования места.

 <td data-bind="text: meal().price"></td>

JSFiddle для справки