Question

我有一个对象，我喜欢从另一个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());

Answer 1

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

试试这个：

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

Answer 2

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

以下是一种实现方法的示例。你可能想要以不同的方式构造它，但它应该让你开始。示范：http://jsfiddle.net/blugrasmaniac/928FQ/1/

以下是相关代码：我添加了一个实用程序函数getMealForBinding，它将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;
}

如何从另一个查找表中打印一个值

2 个答案: