Question

在试图让我的脑袋围绕着敲门声时，这是一个小问题。如果我有以下标记和JavaScript。进行更改的正确位置（标记或脚本）是什么，为了使其更改而不是仅显示在行的第三列中的价格，我显示以currencySymbol为前缀的价格？非常感谢。

标记：

<h2>Your seat reservations</h2>

<table>
    <thead><tr>
        <th>Passenger name</th><th>Meal</th><th>Surcharge</th><th></th>
    </tr></thead>
    <!-- Todo: Generate table body -->
    <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: 0, currencySymbol: "$"},
        { mealName: "Premium (lobster)", price: 34.95, currencySymbol: "$"},
        { mealName: "Ultimate (whole zebra)", price: 290, currencySymbol: "$"}    ];       
    // Editable data
    self.seats = ko.observableArray([
        new SeatReservation("Steve", self.availableMeals[0]),
        new SeatReservation("Bert", self.availableMeals[0])
    ]);
}

ko.applyBindings(new ReservationsViewModel());

Answer 1

所以我跳了枪，应该只是信任教程来回答这个问题。我们从以下位置更新了SeatReservation功能：

function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);
}

为：

//include currency reference and fix price to two decimal places
function SeatReservation(name, initialMeal) {
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);

    self.formattedPrice = ko.computed(function() {
        return self.meal().currencySymbol + self.meal().price.toFixed(2);            
    });    
}

最后应该从第三行标记更新：

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

为：

<td data-bind="text: formattedPrice"></td>

在Knockout中显示之前格式化数据绑定

1 个答案: