Framework7 маршруты, загрузка страницы из существующей строки JSON

Question

У меня есть загрузка данных JSON в начале, а также потяните, чтобы обновить sh. В это время ожидается небольшая задержка. При переходе между страницами он должен быть быстрым, поэтому я собираюсь использовать это уже запрошенное JSON для содержимого моей страницы. Один из объектов JSON - это полная (достаточно маленькая) страница html.

Я не могу найти способ использовать это, и вместо этого следую примеру, перед вторым запросом JSON get перед загрузкой каждая страница (статья). Я предпочел бы просто загрузить данные JSON один раз в начале и использовать их до тех пор, пока они не будут обновлены с помощью pull-to-refre sh.

* В настоящее время работает, но с использованием второго JSON get *

{
  path: '/article/:article_id/',
  // This works after much turmoil.
  // sadly have to do a second json call. could have got with initial.
  async: function (routeTo, routeFrom, resolve, reject) {

  //Testing
  // import('window.TodayJsonDB['+ routeTo.params.article_id +'][\'html\']');
  // window.TodayJsonDB[routeTo.params.article_id]['html'];
  // [data['article']['article_html']
  // console.log(routeTo);

  // Get external data and return template7 template
      this.app.request.json('/__php/json1.php', { one: 1, article_id: routeTo.params.article_id }, function (data) {
       // console.log(data['article'][0]['article_html']);
        resolve(
            // DOM locked until resolve returned.
            // object with resolved route content. Must contain one of:
            // url, content, template, templateUrl, component or componentUrl
            {
             content: data['article'][0]['article_html'],
            },

        );
      });
    }
  // A day of testin but couldnt figure out how to use existing json feed.
  //asyncComponent: () => import('window.TodayJsonDB['+ params.article_id +'][\'html\']'),
  //el: window.TodayJsonDB[params.article_id]['html'],
  //el: import('window.TodayJsonDB['+ params.article_id +'][\'html\']'),
  //template: import('window.TodayJsonDB['+ params.article_id +'][\'html\']'),
  //template: import('window.TodayJsonDB[' + params.article_id +'][html]'),
  //asyncComponent: () => import('window.TodayJsonDB[' + params.article_id +'][html]'),
  //asyncComponent: () => import('window.TodayJsonDB[' + $route.params.article_id +'][html]'),
  //asyncComponent: () => import('window.TodayJsonDB[' + {{article_id}} +'][html]'),
  //asyncComponent: () => import('window.TodayJsonDB[11][\'html\']'),
  //content: window.TodayJsonDB[':article_id']['html'],

},

У меня уже есть это json получить уже; загружается, когда приложение открывается и обновляется с раскрывающимся списком: window.TodayJsonDB

, который содержит:

    window.TodayJsonDB[data['article'][i]['article_id']] = new Array();
    window.TodayJsonDB[data['article'][i]['article_id']]['article_id'] = data['article'][i]['article_id'];
    window.TodayJsonDB[data['article'][i]['article_id']]['title'] = [data['article'][i]['article_title']];
    window.TodayJsonDB[data['article'][i]['article_id']]['content'] = [data['article'][i]['article_content']];
    window.TodayJsonDB[data['article'][i]['article_id']]['html'] = [data['article'][i]['article_html']];

Итак, мой вопрос; как я могу использовать содержимое window.TodayJsonDB[article_id]['html'] для отображения в качестве содержимого страницы вместо необходимости делать еще один вызов JSON, когда пользователь щелкает ссылку.

Мои попытки в коде закомментированы. Любые другие предложения о том, как подходить ко всему по-другому, очень приветствуются.

Спасибо, как всегда.

nb Я пометил Vue, поскольку я считаю, что он тесно связан с Framework7. Я не использую Vue.

Answer 1

Нашел решение, мой рабочий фрагмент кода ниже. Я использовал тот же раздел asyn c и преобразовал вывод массива в строку, используя toString(). Похоже, работает только в разделе asyn c. Теперь можно загрузить JSON для всего на старте, один JSON звонок.

Возможно, поможет кто-то еще с Framework7. Удачи!

{
  path: '/article/:article_id/',
  async: function (routeTo, routeFrom, resolve, reject) {

    // Do we already have the JSON for the page?
    if (typeof window.TodayJsonDB[routeTo.params.article_id]['html'] != "undefined") {
      resolve({
        content: (window.TodayJsonDB[routeTo.params.article_id]['html'].toString()),
      });
    }
    else{
      // Try and get it
      this.app.request.json('/__php/json1.php', { one: 1, article_id: routeTo.params.article_id }, function (data) {
        resolve(
            {
              content: data['article'][0]['article_html'],
            },
        );
      });
    }
  }