nativescript - 可視性を切り替える複数の項目テンプレートを備えた Nativescript リストビュー

Question

複数のアイテム テンプレートと表示の切り替えに関する radlistview に問題があります。nativescript-accordion プラグインを使用せずに、適切なタイプのディスプレイを再作成しようとしています。特定のアイテムの表示属性を切り替える。ここに私のxmlがあります:

<lv:RadListView row="3" items="{{ locationList }}" id="locationList" iosEstimatedRowHeight="0" itemTap="listViewItemTap" itemTemplateSelector="templateSelector" class="list-group">
        <lv:RadListView.itemTemplates>
            <template key="header">
                <GridLayout columns="auto, *" visibility="{{ isItemVisible ? 'visible' : 'collapsed' }}">
...content...</GridLayout>
</template>
            <template key="list-item">
                <GridLayout columns="*, auto" rows="auto, 15" visibility="{{ isItemVisible ? 'visible' : 'collapsed' }}">...content...
</GridLayout>
</template>
</lv:RadListView.itemTemplates>
</lv:RadListView>

itemTap メソッドは次のとおりです。

if (tappedItem.type == "list-item" || tappedItem.type == "list-item-no-location") {
        // Navigate to the details page with context set to the data item for specified index
        topmost().navigate({....}});
    } else if (tappedItem.type == "header") {
        viewModel.collapseExpandItems(tappedItem);

        setTimeout(() => {
            if (platformModule.isIOS) {
            // Uncomment the lines below to avoid default animation
            // UIView.animateWithDurationAnimations(0, () => {
                var indexPaths = NSMutableArray.new();
                indexPaths.addObject(NSIndexPath.indexPathForRowInSection(rowIndex, args.groupIndex));
                //console.log("indexPaths:", indexPaths);
                listView.ios.reloadItemsAtIndexPaths(indexPaths);
            // });
            }
            if (platformModule.isAndroid) {
                listView.androidListView.getAdapter().notifyItemChanged(rowIndex);
            }
        }, 550);

アイテムをロードするためのコードは次のとおりです。

var newHeader = new Item(location.type, location.id, location.name, ..., true);
viewModel.locationList.push(newHeader);
var newItem = new Item(listItem.type, listItem.id, listItem.name, ... , true);
viewModel.locationList.push(newItem);

locationListviewModel の ObservableArray です。ビューモデルの Item クラスは次のとおりです。

var Item = (function (_super) {
        __extends(Item, _super);
        function Item(type, id, name, ..., isItemVisible) {
            var _this = _super.call(this) || this;
            _this.type = type;
...
            _this.isItemVisible = isItemVisible;
            return _this;
        }
        Item.prototype.toggleVisibility = function (args) {
            // console.dir(this);
            console.log("toggleVisibility value: " + this.isItemVisible);
            this.set("isItemVisible", !this.isItemVisible);
        };
        return Item;
    }(Observable.Observable));

最後に、viewModel の viewModel.collapseExpandItems メソッド:

collapseExpandItems: function(tappedItem) {
            this.locationList.forEach(function(item) {
                //console.log("isItemVisible:", item.isItemVisible);
                if ((item.type === 'list-item') && item.id === tappedItem.id) {
                    item.toggleVisibility();
                }
            });
        },

ヘッダー アイテムの下のアイテムは非表示になっていますが、visibilty="collapsed" に設定されていないアイテムも含めて、すべてのアイテムが非表示になっています。動作については .gif を参照してください。何か案は？ここに画像の説明を入力

一時的には正しいことをしているように見えますが、その後、すべてを隠してしまいます。これは私が望んでいることではありません。タップされたヘッダーの下にあるアイテムを非表示にするだけです。