Knockout如何從另一個查找表打印值

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

一個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; 
} 

Answer 2

我覺得你以後有什麼是computed 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());