0

我对具有多个项目模板和切换可见性的 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);

locationList是 viewModel 中的 ObservableArray。这是 viewModel 中的 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。有任何想法吗？在此处输入图像描述

似乎暂时它在做正确的事情，但随后它隐藏了一切，这不是我想要的。我希望它只是隐藏点击标题下的项目。

4

0 回答 0