0

这是我的第一个 knockout.js 应用程序，因此我将稍微简化我的代码以说明我想要完成的工作。

我有一个视图模型设置如下：

function Product(data) {
    this.productName = data.productName;
    this.serialNumber = data.serialNumber;
    this.version = ko.observable(data.version);
    this.isSelected = ko.observable(data.IsSelected);
}

function RestoreViewModel() {
    var self = this;

    //Properties
    self.allCustomerProducts = ko.observableArray([]);

    //Computations
    self.selectedProducts = ko.computed(function() {
        return ko.utils.arrayFilter(self.allCustomerProducts(), function(product) { return product.isSelected() });
    });
}

和一些标记设置如下：

<div id="Version1">
   <div class="product1"><a href="">download link goes here.</a></div>
   <div class="product2"><a href="">download link goes here.</a></div>
   <div class="product3"><a href="">download link goes here.</a></div>
</div>

<div id="Version2">
   <div class="product1"><a href="">download link goes here.</a></div>
   <div class="product2"><a href="">download link goes here.</a></div>
   <div class="product3"><a href="">download link goes here.</a></div>
</div>

设置的方式是用户拥有他们选择的产品列表，然后为每个产品选择一个版本。这可以正常工作，因此可以假设selectedProducts计算方法正在返回具有正确数据的正确数组。

经过多次尝试，我无法弄清楚如何根据产品和版本选择显示下载？

如果用户选择产品 1 和版本 1，然后还选择产品 1 和版本 2，我需要出现这些相应的元素。

如果我的视图模型中有任何内容或者我的 HTML 标记应该不同，我愿意重新工作以使其正确。

编辑：这是一个显示设置和所需输出的插图：

例子

4

1 回答 1

1

给你：更新小提琴

因此，整个计划是获取所选产品的数组并创建一个对象数组，代表该数组的下载集。要获取该数组，逻辑在getSelectedDownloads函数中。按版本和映射直接分组。

var getSelectedDownloads = function() {
    var selectedProducts = self.selectedProducts();
    var versions = ko.utils.arrayGetDistinctValues(
        ko.utils.arrayMap(selectedProducts, function (item) { return item.version(); })
    ).sort().reverse();

    return ko.utils.arrayMap(versions, function (version) {
        var items = ko.utils.arrayFilter(selectedProducts, function (item) {
            return item.version() == version;
        }).sort(function (a, b) {
            var x = a.displayName, y = b.displayName;
            return x < y ? -1 : (x > y ? 1 : 0);
        });
        return {
            verid: version.replace(/\./g, ''),
            header: version.replace(/(\d).*/, 'Version $1 Downloads'),
            items: ko.utils.arrayMap(items, function (item) {
                return {
                    label: item.displayName + ' Software',
                    url: '#' //set your urls here
                };
            })
        };
    });
};

因此，每个对象都将包含verid,header和items属性（其中项目代表链接），然后您可以绑定到这些属性。

<div id="downloads" data-bind="foreach: selectedDownloads">
    <div data-bind="attr: { id: verid }">
        <h5 data-bind="text: header"></h5>
        <ul data-bind="foreach: items">
            <li>
                <a data-bind="text: label, attr: { href: url }"></a>
            </li>
        </ul>
    </div>
</div>
于 2012-09-20T20:59:38.477 回答