Question

使用 knockout.js 我想要使用所选的Product更新查看。 My View的模型是Item，其中包含下拉列表中的Product列表。更改Product后，我希望该视图能够反映所选Product的价格和数量。

我将View的模型（一个Item）传递给我的淘汰赛ViewModel。一个项目可能并不总是有任何产品，所以我如何防御性地编码，所以我没有得到所选产品的任何JavaScript错误？在初始加载时，应选择第一个产品。

最后，如果数量为0，我想显示IN 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 Fiddle是here。

如何绑定到可观察数组中的选定项

1 个答案: