DataGrid com Knockoutjs

by barbados22

HTML

<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<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>

JavaScript

// 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());