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計算されたメソッドが正しいデータを含む適切な配列を返していると見なすことができます。

何度も試してもわからなかったのは、製品とバージョンの選択に基づいてダウンロードを表示する方法です。

ユーザーがproduct1とバージョン1を選択してから、product1とバージョン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 に答える