Framework7 路由，从现有 JSON 字符串加载页面

Question

我一开始就有JSON数据加载，也是拉动刷新。在这些时间里，预计会有小的延迟。在页面之间移动时，它应该很活泼，所以我希望将这个已经请求的 JSON 用于我的页面内容。 JSON 对象之一是整个（足够小）html 页面。

我找不到使用它的方法，而是按照示例在加载每个页面（文章）之前发出第二个 JSON get 请求。我宁愿只在开始时加载一次 JSON 数据并使用它直到通过下拉刷新刷新。

* 目前正在工作，但使用第二个 JSON 得到 *

{
  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']];

所以我的问题是；当用户单击 link.

时，如何使用 window.TodayJsonDB[article_id]['html'] 的内容显示为页面内容而不是必须执行另一个 JSON 调用

我在代码中的尝试，注释掉了。非常欢迎任何其他关于如何以不同方式处理整个事情的建议。

一如既往的感谢。

n.b。我标记了 Vue，因为我认为它与 Framework7 密切相关。我没有使用 Vue。

Answer 1

找到解决方案，我的工作代码片段如下。我使用相同的异步部分并使用 toString() 将数组输出转换为字符串。似乎只在异步部分工作。现在可以在开始时为所有内容加载 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'],
            },
        );
      });
    }
  }

Framework7 路由，从现有 JSON 字符串加载页面

Framework7 routes, load page from existing JSON string

javascript

ajax

vue.js

html-framework-7

vue-router