Question

这是我的第一个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计算方法正在返回一个包含正确数据的正确数组。

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

如果用户选择了product1和版本1，然后又选择了product1和版本2，我需要显示相应的元素。

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

修改：以下是显示设置和所需输出的说明：

Example

Answer 1

这里你去：Updated fiddle

因此，整个计划是采用所选产品数组并创建一个对象数组，表示该数组的下载集。要获得该数组，逻辑位于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>

根据用户输入动态显示内容

1 个答案: