0

これはサンプル コードの knockout.js です。

<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 data-bind="text: name"></td>
        <td data-bind="text: meal().mealName"></td>
        <td data-bind="text: meal().price"></td>
    </tr>    
</tbody>
    <tbody><button data-bind="click: addSeat">Reserve another seat</button></tbody>
</table>

js:

// Class to represent a row in the seat reservations grid
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[1])
    ]);

    self.addSeat = function() {
        self.seats.push(new SeatReservation("12321", self.availableMeals[0]));
    }
}

ko.applyBindings(new ReservationsViewModel());

このコードは、列の追加に適しています。しかし、私は列が必要です、それは可能ですか?

4

1 に答える 1

1

ReservationViewModel に次の行を追加し、ヘッダーを以下の html 部分に置き換えます

self.Columns = ko.observableArray([{ ColumnName: "Header1" }, { ColumnName: "Header2"}]);


 <tr data-bind="foreach: Columns">
            <th data-bind="text: ColumnName>
                Passenger name
            </th>
        </tr>

これがあなたを助けることを願っています

于 2012-12-27T09:12:39.857 に答える