如何使用knockoutjs在textarea中显示集合数据?

时间:2014-01-18 15:39:53

标签: knockout.js

我想在textarea中显示集合数据,并根据条件

显示不同颜色的每一行

我引用了以下网站,但无法在textarea中显示数据。 http://learn.knockoutjs.com/#/?tutorial=collections

请帮帮我......

HTML:

<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>
</table>

的javascript:

// 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: 50 },
        { mealName: "Premium (lobster)", price: 100 },
        { mealName: "Ultimate (whole zebra)", price: 200 }
    ];    

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

ko.applyBindings(new ReservationsViewModel());

实际输出为:

Your seat reservations

Passenger   Name       Meal           Surcharge
Steve       Standard  (sandwich)      50
Bert        Premium   (lobster)       100
Bert        Ultimate  (whole zebra)   200

我想在textarea中显示此内容(o / p),我想显示整个内容 不同颜色的线,意味着如果附加费是50rs显示为红色 颜色,如果100以黄色显示

0 个答案:

没有答案