Nativescript list-view с несколькими шаблонами элементов, переключающими видимость - PullRequest
Новая
       56

Nativescript list-view с несколькими шаблонами элементов, переключающими видимость

0 голосов
/ 16 октября 2018

У меня проблема с 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 являющийся ObservableArray в viewModel.И вот класс Item в viewModel: 

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.collapseExpandItems в viewModel: 

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 = "рухнул".Пожалуйста, смотрите. GIF для поведения.Любые идеи? введите описание изображения здесь

Кажется, что на мгновение все происходит правильно, но потом все скрывается, а это не то, чего я хочу.Я хочу, чтобы он просто скрывал элементы под повернутым заголовком.

...