Imported class method after router.back

Questions
1

Hello. I use CLI F7 project.
I can’t access the DOM element from the imported custom class method after router.back.

ex.:

table.js

export default class Table {
  constructor(){
   ...
  }
  test() {
    var $$ = self.$$;
    console.log( $$('.some_el_in_some_component').html() );
  }
  call_some_page() {
    app.f7.views.main.router.navigate('/some_component_2/');
  }
}

some_component_1.html

<template>
...
</template>
<script>
import Table from '../js/table.js';
export default {
  on: {
    pageInit: function (e,page) {
      self = this;
      var $$ = self.$$;
      self.set_table();
      ...
    }
  }
  methods: {
     set_table() {
        let tbl = new Table();
     }
  }
</script>

Problem:

  • after calling ‘call_some_page()’, opening some_component_2, and returning back with ‘routher.back()’, i don’t see ‘test()’ result.
    error: ’ $$(…).html is not a function…

…as if the connection between the imported class and the component is lost. And class methods continue to work, but it is not possible to output the result to an element in component_1.

Help me, please.

2

stackPage или keepAlive сохраняет компонент, подойдет?

3

keepAlive не туда прописывал! Перечитал мануал ) Спасибо большое!

4

Методы класса теперь отлично работают, но обнаружил проблему при keepAlive:

  • мне нужно передавать разные параметры каждый раз, но когда я открываю страницу компонента с keepAlive при помощи router.navigate(’/component_page/’+id), т.е. с параметрами, то параметр передается не каждый раз, а один раз. Я так понимаю кэшируется. Подскажите, как быть в этом случае?
5

Обрабатывать событие routeUrlUpdate : https://framework7.io/docs/view.html#router-instance-events

6

Я попробовал разные варианты, не пойму где его применять? Непосредственно на сохраненном компоненте? Или при его вызове из основного?

7

this.$router.on(‘routeUrlUpdate’, function (newRoute, router) {
});
в pageInit

8

или в created для компонента

9

pageInit выполняется только один раз, я там пробовал

10

Задача повесить событие, его нужно вешать один раз

11

не выходит, работает только mount, но событие и там ничего не ловит…
как динамически менять данные на keepAlive странице? Зашел в тупик…

12

routeChange это событие ловится?

13

нет почему-то не ловится…
я пробовал с разным синтаксисом:
this.$router
app.f7.views.main.router
…

14

Нашёл! Нужно ловить событие “routeChange”. Большое спасибо еще раз!

15

Прошу прощения за назойливость, но я событие то поймал, а никак не могу обновить данные на странице. Обращаюсь напрямую к input элементу через $$(’#id’).val() и если передаю константу, то всё ок, как только подсуну переменную - undefined ((
В чем собака зарыта?

16

Так не нужно делать, вдруг в DOM в текущий момент несколько id=“id”?

Что именно undefined?

17 
      app.f7.views.main.router.on('routeChange', function (newRoute, previousRoute, router) {
        console.log('INIT newRoute.params.key:',newRoute.params.key);
        var test=newRoute.params.key;
        console.log('tets:',test);
        $$('#some_unical_el').val('test '+test);
      });

консоль показывает test: some_key_value
в поле input выводится test undefined вот загадка

пробовал через data в компоненте типа self.key но тоже самое

18

замени на console.log(‘tets:’,JSON.stringify(test));
что будет?

19

так просто test и дальше пустота

20

routeChange => routeChanged