根据Id从KnockoutJS viewmodel获取订单

Question

我正在尝试从KnockoutJS viewmodel获取订单，但很难完成此操作。

这就是viewmodel的样子：

{"Orders":
[{"Id":16,"Status":2,
"Products":
    [{"Id":14,"OrderId":16,"Price":5},
    {"Id":15,"OrderId":16,"Price":10},
    {"Id":16,"OrderId":16,"Price":20},
    {"Id":17,"OrderId":16,"Price":30}]},

{"Id":17,"Status":2,
"Products":
    [{"Id":18,"OrderId":17,"Price":0}]}
]}

这是我多次尝试之一：

var viewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));
ko.applyBindings(viewModel);

$(document).on("click", ".btnDetails", function () {
    var oId = $(this).attr('id');

    debugger;

    var order = ko.utils.arrayFirst(viewModel.Orders(), function (item) {
        return item.Id === oId;
    });
});

如何使用order 16获得完整的Id？

这不是observableArray()，没有突变。这仅用于显示模态（Twitter Bootstrap）中订单的详细信息。

Answer 1

看起来你的代码应该运行得很好，除了你的arrayFirst()函数有错误。你应该

var order = ko.utils.arrayFirst(viewModel.Orders(), function(item) {
    return item.Id() === oId;
});

因为您映射了viewmodel属性，比较项目的Id仍将比较ko函数。您需要获取值并直接进行比较。完成后，订单应该是第一个与id匹配的订单。

Answer 2

我对完整订单的含义并不完全清楚。但看看这个jsfiddle

修改
重新阅读这个问题，它开始对我有意义。 获取订单的参考

1. 将selectedOrder observable添加到您的viewmodel。
2. 然后添加一个接受订单的函数showOrder。并将selectedOrder设置为incomming项目
3. 包含订单数据的标签 - 绑定到点击。

这应该让你非常接近我认为你需要的东西，因为selectedOrder将包含所有产品以及用于显示目的

<强> HMTL

<ul class="list-group" data-bind="foreach: data.Orders">
  <li class="list-group-item">
    <h3 data-bind="click: $parent.showItem">
        Order <span data-bind="text: Id"></span>
    </h3>
  </li>
</ul>

<强> JS

var model = {
    "Orders": [{
        "Id": 16,
            "Status": 2,
            "Products": [{
            "Id": 14,
                "OrderId": 16,
                "Price": 5
        }, {
            "Id": 15,
                "OrderId": 16,
                "Price": 10
        }, {
            "Id": 16,
                "OrderId": 16,
                "Price": 20
        }, {
            "Id": 17,
                "OrderId": 16,
                "Price": 30
        }]
    },

    {
        "Id": 17,
            "Status": 2,
            "Products": [{
            "Id": 18,
                "OrderId": 17,
                "Price": 0
        }]
    }]
};
var selectedOrder = ko.observable();

function showItem(item) {
    selectedOrder(item);
    alert("Selected Order: " + item.Id());

}

var vm = {
    data: model,
    showItem: showItem,
    selectedOrder: selectedOrder
};

$(document).ready(function () {
    var viewModel = ko.mapping.fromJS(vm);
    ko.applyBindings(viewModel);

});