如何綁定到可觀察陣列中的選定項目

Question

使用knockout.js我想更新我的查看與所選的Product。我的視圖的模型是Item，其中包含Product s列表的下拉列表。當Product更改時，我希望該視圖反映出所選的Product的價格和數量。

我將View的模型（一個Item）傳遞給我的挖空ViewModel。一個項目可能並不總是有任何產品，所以我如何防禦性地對這個代碼進行編碼，所以我沒有得到所選產品的任何javascript錯誤？在初始加載時應該選擇第一個產品。

最後，如果Quantity爲0，我想顯示IN STOCK，否則顯示爲OUT OF STOCK。

任何建議/改進如何做到這一點與knockout.js表示讚賞。

下面是目前我的代碼有多遠。我無法顯示所選產品的數量和價格。

public class Item 
{ 
    public IList<Product> Products { get; set; } 
} 

public class Product 
{ 
    public decimal Price { get; set; } 
    public int Quantity { get; set; } 
} 

View.cshtml

<select data-bind="options: item.Products, value: selectedId, 
        optionsValue: 'Id', optionsText: 'Name', 
        event: { change: change }"></select> 

Price: <span data-bind="text: product.Price"></span> 
Quantity: <span data-bind="text: product.Quantity"></span> 

var viewModel = new ItemViewModel(@Html.Raw(Json.Encode(Model))); 
ko.applyBindings(viewModel); 

function ItemViewModel(model) 
{ 
    var self = this; 

    self.item = model; 
    self.product = ko.observable(model.Products[0]); 
    alert(model.Products[0].Quantity); 
    self.selectedId = ko.observable(); 

    self.change = function() 
    { 
     self.product = ko.utils.arrayFirst(self.item.Products, function (product) 
     { 
      return product.Id === self.selectedId(); 
     }); 

     alert(product.Quantity); 
    } 
} 

JSFiddle

Answer 1

我會刪除change事件綁定。你綁定到選定的產品，這是一個可觀察的，它更新跨度 - 這是KO爲你做的工作。

<select data-bind="options: item.Products, value: selectedProduct, 
     optionsText: 'Name'> 
</select> 

Price: <span data-bind="text: selectedProduct().Price"></span> 
Quantity: <span data-bind="text: selectedProduct().Quantity"></span> 

var viewModel = new ItemViewModel(@Html.Raw(Json.Encode(Model))); 
ko.applyBindings(viewModel); 

function ItemViewModel(model) 
{ 
    var self = this; 

    self.item = model; 
    self.selectedProduct = ko.observable(model.Products[0]); 
} 

當用戶選擇一個新的產品，KO自動更新selectedProduct對象，自動更新價格和數量的綁定。工作JS小提琴是here。