// Class to represent a row in the seat reservations grid function CriaReserva(nome, reservaInicial) { var self = this; self.nome = nome; self.reserva = ko.observable(reservaInicial); } // Overall viewmodel for this screen, along with initial state function ReservasViewModel() { var self = this; // Non-editable catalog data - would come from the server self.reservasDisponiveis = [ { Tipo: "Standard", preço: 10.00, UF: "SP" }, { Tipo: "Premium", preço: 34.95, UF: "SP" }, { Tipo: "Ultimate", preço: 290.15, UF: "SP" } ]; // Editable data self.reservas = ko.observableArray([ new CriaReserva("Cristoffer", self.reservasDisponiveis[2]), new CriaReserva("Cristoffer", self.reservasDisponiveis[2]), new CriaReserva("Marcos", self.reservasDisponiveis[1]) ]); // Operations self.adicionaReserva = function() { self.reservas.push(new CriaReserva("", self.reservasDisponiveis[0])); } } ko.applyBindings(new ReservasViewModel());
<h2>Lista de reservas</h2> <table> <thead><tr> <th>Cliente</th><th>Reserva</th><th>Preço</th><th>UF</th> </tr></thead> <!-- Todo: Generate table body --> <tbody data-bind="foreach: reservas"> <tr> <td><input data-bind="value: nome" /></td> <td><select data-bind="options: $root.reservasDisponiveis, value: reserva, optionsText: 'Tipo'"></select></td> <td data-bind="text: reserva().preço"></td> <td data-bind="text: reserva().UF"></td> </tr> </tbody> </table> <br> <button data-bind="click: adicionaReserva">Nova Reserva</button>