Nativescript getElementsByClassName () Ошибка

Question

Я всегда получаю сообщение об ошибке, когда пытаюсь получить значение из класса после прокрутки экрана

например: на моем телефоне на экране отобразится 8 элементов списка, если у меня более 8 элементов, мне нужно прокрутить. И когда я пытаюсь нажать после прокрутки, он показывает ошибку.

вот мой код

<GridLayout rows="*">
        <ListView row="0" items="{{ ListID }}" itemTap="onItemTap" class="list-group">
            <ListView.itemTemplate>
                <StackLayout class="list-group-item">
                    <Label text="{{ ID || 'Downloading...' }}" textWrap="true" class="OutletID" />
                    <Label text="{{ Name || 'Downloading...' }}" textWrap="true" class="OutletName" />
                </StackLayout>
            </ListView.itemTemplate>
        </ListView> 
    </GridLayout>

и JS

function onItemTap(args) {
    const index = args.index;
    const page = args.object;
    var test = page.getElementsByClassName('OutletID')[index].text;
    console.log(test);
}
exports.onItemTap = onItemTap;

Answer 1

я отредактировал свой JS так:

function onItemTap(args) {
    const index = args.index;
    const val = vm.ListID[index].Name;
    console.log(val);
}
exports.onItemTap = onItemTap;

примечание: vm - это pagebindingContext, а Name ('OutletID') - мой массив ListID ({ID: ID, Name: Name})

Answer 2

getElementsByClassName не является встроенным методом, он должен быть доступен только если вы установили плагин nativescript-dom .

ListView работает совсем не так, как другие компоненты, он перерабатывает шаблон при прокрутке вниз / вверх для повышения производительности, поэтому использование getElementsByClassName здесь не будет разумной идеей.

function onItemTap(args) {
    const index = args.index; // The index that was tapped
    const view  = args.view; // The item instance that was tapped
    const data = view.bindingContext // will return enter data item
}

Источник: https://docs.nativescript.org/ui/ns-ui-widgets/list-view

Answer 3

Я раньше не использовал nativescript, поэтому возьмите это с крошкой соли, но ...

Когда вы используете библиотеку на основе компонентов, такую ​​как NativeScript, как правило, вы не хотите получать ссылки на элементы в этом компоненте через какую-либо стороннюю библиотеку. Использование dom для получения этих ссылок, по сути, таково. Вы предполагаете, что эти элементы все еще находятся в доме. Зачем им отдавать элемент в дом, а затем скрывать его? Я предполагаю, что то, что они делают под капотом, это удаление элемента из dom, когда он прокручивает страницу вверх и вниз, именно поэтому ваш поиск терпит неудачу. Вы получаете индекс> 7, на странице будет отображаться только 8, поэтому, когда вы запрашиваете страницу для всех из них, вы получаете список обратно размером 8, а затем вы пытаетесь получить 9-й элемент (с индексом 8).

Так что я думаю, что решение вашей проблемы состоит в том, чтобы перестать пытаться «обойти» компонентную модель и вместо этого работать с методами и значениями, предоставленными вам платформой NativeScript.

В вашем onItemTap () вы сможете получить ссылку на элемент, который был напрямую связан. Поэтому я думаю, вы могли бы выглядеть примерно так.

function onItemTap(args) {
    console.log(args.item.text);
}

itemTap Издается при нажатии на элемент в. Чтобы получить доступ к прослушиваемому элементу, используйте event.item.

Я не смог найти никакого определения для класса "itemTap", поэтому я не знаю, какие у него методы или атрибуты, но здесь я нашел ссылку на него. Если вы пытаетесь очистить само значение от dom (например, текстового атрибута), вам может потребоваться сделать что-то вроде args.item.rawElement.text, но это специфично для API.

https://nativescript -vue.org / о / Docs / элементы / компоненты / список ракурс / # событие