0

我有一个对象，我喜欢从另一个 observableArray 中读取它的值作为查找。这是它的链接http://jsfiddle.net/928FQ/。

我有一个正确填充的选择列表，它根据行值显示正确的选择，但是如何将“附加费”列从“0”更改为“便宜”。看起来options标签仅适用于select. 任何帮助都会很棒。

HTML：

<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>
        <td><select data-bind="options: $parent.priceLookup, optionsText: 'defenition', optionsValue: 'price', value: meal().price"></select>
        </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 },
        { mealName: "Premium (lobster)", price: 34.95 },
        { mealName: "Ultimate (whole zebra)", price: 290 }
    ]; 
    self.priceLookup = ko.observableArray([
        { price:0, defenition: 'cheap'},
        { price:34.95, defenition: 'average'}
   ]); 

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

ko.applyBindings(new ReservationsViewModel());
4

2 回答 2

0

我认为您所追求的是计算的 observable。然后，您可以根据需要计算该字段。它可能正在检查另一个值，在数组中查找某些内容等。

尝试这个：

// 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);
    self.priceLookup = ko.computed(function(){
        if (self.meal().price < 34.95)
            return 'cheap';
        else if (self.meal().price < 100)
            return 'average';
    }, self); 
}

// 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])
    ]);
}

ko.applyBindings(new ReservationsViewModel());
于 2013-04-26T02:02:00.670 回答
0

ko.computed对于此类行为，A是一个不错的选择。更难的决定是将其连接到现有数据集的位置和方式。

这是一种方法的示例。您可能希望以不同的方式构建它，但它应该可以帮助您入门。演示：http: //jsfiddle.net/blugrasmaniac/928FQ/1/

以下是相关代码：我添加了一个实用函数getMealForBinding，它将 a 应用于ko.computed餐对象。在此示例中，我每次都覆盖计算，但您可能希望实现一些更智能的逻辑。

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

//add functionality to basic meal object
function getMealForBinding(meal){
    meal.friendlyPrice = ko.computed(function(){
        var price = ko.utils.arrayFirst(self.priceLookup(), function(p){
            return p.price === meal.price;
        });
        if( price!=null){
           return price.defenition;
        };
        return "unknown";
    });

    return meal;
}
于 2013-04-26T02:20:37.453 回答