javascript - 如何使用 knockout 数据和 "external"数据进行计算来过滤数据

Question

背景:我正在将遗留系统中的 JavaScript 逻辑转移到 knockout 系统中，以获得更多的结构，并且将来必须编写更少的代码。由于时间限制，我只能在每次部署之间将部分代码移至 knockout 。

问题:一些数据是由遗留代码生成的，一些数据是由 knockout 生成的，我在创建 knockout 逻辑来处理以下场景时遇到问题(请参阅下面的代码代码片段和 JSFiddle 链接到相同的代码)。产品单选按钮不是通过 knockout 生成的，但报价列表是通过 knockout 生成的。过滤报价列表的关键按钮按照我想要的方式工作，但我还没有设法弄清楚如何仅获取产品 1 下列出的产品 1 的报价以及仅获取产品 2 的报价列在产品 2 下。有谁可以帮忙吗？

我认为，如果产品标题是根据 knockout View 模型中的数据生成的，那么我的问题就不会那么难解决，但正如您所看到的，情况并非如此。

https://jsfiddle.net/b6er4wke/3/

function myViewModel() {
    var self = this;
    self.wrappedProducts = ko.observableArray();
    self.availableOffers = ko.observableArray();
    self.filterKey = ko.observable(1);
    filteredItems = ko.computed(function() {
        return ko.utils.arrayFilter(self.availableOffers(), function (offer) {
            var isCorrectKey = offer.key == self.filterKey();
            return (isCorrectKey);
        });
    });
    
    self.filter = function(keyFilter) { 
        self.filterKey(keyFilter); 
    };
    
    (function() {
        // Products
        self.wrappedProducts.push({"prod":"1"});
        self.wrappedProducts.push({"prod":"2"});
        // Offers
        self.availableOffers.push({"name": "offer1", "key": "1", "prod": 1});
        self.availableOffers.push({"name": "offer2", "key": "2", "prod": 1});
        self.availableOffers.push({"name": "offer3", "key": "2", "prod": 2});
    })();
}
var viewModel = new myViewModel();
ko.applyBindings(viewModel);

ul, h4 {margin-top: 0px; margin-bottom:0px;}
label {font-weight:bold;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h4>All products</h4>
<ul data-bind="foreach: wrappedProducts">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
<h4>Available offers</h4>
<ul data-bind="foreach: availableOffers">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
<div>
    <button data-bind="click: function() {filter(1);}">key1</button>
    <button data-bind="click: function() {filter(2);}">key2</button>
    filterKey = <span data-bind="text: filterKey"></span>
</div>
<hr>
    <label for="prod1">Product 1</label>
<ul data-bind="foreach: filteredItems">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
    <label for="prod2">Product 2</label>
<ul data-bind="foreach: filteredItems">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>

Answer 1

Knockout 会自动将您的绑定(bind)表达式包装在计算中，因此您实际上可以简单地将filteredItems设为常规函数，并使用您想要作为参数显示的产品来调用它:

filteredItems = function filteredItems(product) {
    return ko.utils.arrayFilter(self.availableOffers(), function (offer) {
        return offer.key == self.filterKey() && offer.prod == product;
    });
};

<label for="prod1">Product 1</label>
<ul data-bind="foreach: filteredItems(1)">
  <li data-bind="text: ko.toJSON($data)"></li>
</ul>

<label for="prod2">Product 2</label>
<ul data-bind="foreach: filteredItems(2)">
  <li data-bind="text: ko.toJSON($data)"></li>
</ul>

并且当 availableOffers 发生变化时仍然会自动更新。

function myViewModel() {
    var self = this;
    self.wrappedProducts = ko.observableArray();
    self.availableOffers = ko.observableArray();
    self.filterKey = ko.observable(1);
    filteredItems = function filteredItems(product) {
        return ko.utils.arrayFilter(self.availableOffers(), function (offer) {
            return offer.key == self.filterKey() && offer.prod == product;
        });
    };
    
    self.filter = function(keyFilter) { 
        self.filterKey(keyFilter); 
    };
    
    (function() {
        // Products
        self.wrappedProducts.push({"prod":"1"});
        self.wrappedProducts.push({"prod":"2"});
        // Offers
        self.availableOffers.push({"name": "offer1", "key": "1", "prod": 1});
        self.availableOffers.push({"name": "offer2", "key": "2", "prod": 1});
        self.availableOffers.push({"name": "offer3", "key": "2", "prod": 2});
    })();
}
var viewModel = new myViewModel();
ko.applyBindings(viewModel);

ul, h4 {margin-top: 0px; margin-bottom:0px;}
label {font-weight:bold;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<h4>All products</h4>
<ul data-bind="foreach: wrappedProducts">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
<h4>Available offers</h4>
<ul data-bind="foreach: availableOffers">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
<div>
    <button data-bind="click: function() {filter(1);}">key1</button>
    <button data-bind="click: function() {filter(2);}">key2</button>
    filterKey = <span data-bind="text: filterKey"></span>
</div>
<hr>
    <label for="prod1">Product 1</label>
<ul data-bind="foreach: filteredItems(1)">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>
    <label for="prod2">Product 2</label>
<ul data-bind="foreach: filteredItems(2)">
    <li data-bind="text: ko.toJSON($data)"></li>
</ul>