Ошибка Nativescript getElementsByClassName ()
Я всегда получаю сообщение об ошибке, когда пытаюсь получить значение из класса после прокрутки экрана
Например: на моем телефоне на экране будет отображаться 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.info(test);
}
exports.onItemTap = onItemTap;
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Раньше я не использовал nativescript, так что отнеситесь к этому с недоверием, но ...
Когда вы используете библиотеку на основе компонентов, такую как NativeScript, обычно вы не хотите получать ссылки на элементы в этом компоненте через какую-либо стороннюю библиотеку. По сути, использование dom для получения этих ссылок. Вы предполагаете, что эти элементы все еще находятся в домике. Зачем им рендерить элемент в дом, а затем скрывать его? Я предполагаю, что под капотом они удаляют элемент из dom, когда он прокручивается вверх и со страницы, поэтому ваш поиск не работает. Вы получаете индекс> 7, на странице будет отображаться только 8, поэтому, когда вы запрашиваете страницу для всех из них, вы получаете список размером 8, а затем вы пытаетесь получить 9-й элемент (с индексом 8).
Поэтому я думаю, что решение вашей проблемы состоит в том, чтобы перестать пытаться «обойти» компонентную модель и вместо этого работать с методами и значениями, предоставленными вам фреймворком NativeScript.
В вашем onItemTap () вы должны иметь возможность получить ссылку на элемент, который был затронут напрямую. Думаю, вы могли бы выглядеть примерно так.
function onItemTap(args) {
console.info(args.item.text);
}
itemTap Излучается при касании элемента в. Чтобы получить доступ к выбранному элементу, используйте event.item.
Я не смог найти никакого определения для класса itemTap, поэтому я не знаю, какие методы или атрибуты у него есть, но здесь я нашел ссылку на него. Если вы пытаетесь очистить значение от самого dom (например, текстовый атрибут), вам может потребоваться сделать что-то вроде args.item.rawElement.text, но это относится к API.
https://nativescript-vue.org/en/docs/elements/components/list-view/#events
я отредактировал свои js вот так:
function onItemTap(args) {
const index = args.index;
const val = vm.ListID[index].Name;
console.info(val);
}
exports.onItemTap = onItemTap;
примечание: vm - это pagebindingContext, а Имя ('OutletID') - это мой массив ListID ({ID: ID, Name: Name})
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
Спасибо за совет. теперь я знаю, что мне нужно делать.