javascript - Knockout.js 我应该如何将计算值添加到 observaleArray？

Question

我需要添加到 observableArray 计算值，我当前的代码如下所示:

   self.prices = ko.observableArray();
   .....
   var pax = $("select#ticketsnumber option:selected").val();
        var irt;
        if ($("input[name='isrt']").is(":checked")) {
            irt = 1;
        } else {
            irt = 0;
        }    
    $.each(self.prices(), function (price) {
            price.FinalPrice = ko.computed(function() {
               return prices.Price * irt * parseInt(pax);
        });
    });

但是我不知道应该如何调用这个计算值的绑定(bind)(目前是这种方式 - <span name="totalprice" data-bind="text: ko.utils.unwrapObservable($data.FinalPrice)"> )，而且这似乎还没有添加计算值 - 绑定(bind)结果显示 0。数据模型:

  public class PriceItem
        {
            ...
            public string Price { get; set; }
           ...
            public int FinalPrice { get; set; }
        }

这是我将数据检索到 self.prices 的方式:

self.getprices = function () {
            var destinationtypefrom = $("select#optionsfrom option:selected").attr("name");
            var destinationtypeto = $("select#optionsto option:selected").attr("name");
            var fromcode = $("select#optionsfrom").val();
            var tocode = $("select#optionsto").val();
            var json = { desttypefrom: destinationtypefrom, desttypeto: destinationtypeto, codefrom: fromcode, codeto: tocode, 'DepartureDate': $("#departure").val(), 'ReturnDate': $("#return").val() };
            $.ajax({
                url: "/Home/GetFlights",
                data: json,
                type: "post",
                cache: false,
                success: function (result) {
                    if (result.Error == null) {
                        self.prices(result);
                        ko.mapping.fromJS(result, {}, self.prices);
                    } else {
                        $("#modalerror").on("show.bs.modal", function () {
                            var modal = $(this);
                            modal.find("#errormsg").text(result.Error);
                        });
                    }
                },
                error: function (xhr) {
                    var err = eval("(" + xhr.responseText + ")");
                    alert(err.Message);
                }
            });
        }

Answer 1

主要问题是你的 $.each 假设第一个参数是 prices 中的实际元素是错误的大批。事实上，第一个参数是索引，第二个参数是实际的 price你想要增强。

此外，您似乎在 computed 中有一个拼写错误。函数计算，是price.Price而不是prices.Price .

试试这个:

$.each(self.prices(), function (index, price) {
    price.FinalPrice = ko.computed(function() {
        return price.Price * irt * parseInt(pax);
    });
});

在你的 HTML 中，类似:

<div data-bind="foreach: prices">
    <span name="totalprice" data-bind="text: FinalPrice"></span>
</div>

参见Fiddle