时间戳

首页 > 解决方案 > 获取 JSON 并在不同页面上构建 HTML 表（Phonegap + Framework7）

javascript - 获取 JSON 并在不同页面上构建 HTML 表（Phonegap + Framework7）

问题描述

我正在使用Framework7构建一个移动应用程序，它扫描包含 JSON URL 并获取相关数据的 QR 码（使用这个 Phonegap 插件）。然后使用这些数据来生成和填充表格。这就是我的代码的样子：

$$(document).on('page:init', '.page[data-name="scanner"]', function (e) { 
  $$('.page-content').find('#scanCode').on('click', function (e) { 
    cordova.plugins.barcodeScanner.scan(          
      function (result) {        
       app.request.json(result.text, function (data) {           
         var tableHtml = '';
         for(var i = 0; i < data.length; i+=1){
          tableHtml+= '<tr><td class="label-cell">Brand</td> <td class="numeric-only" id="brand">' +data[0].brand+ ' </td> </tr>';
          tableHtml+= '<tr><td class="label-cell">Model</td> <td class="numeric-only" id="model">' +data[0].model+ ' </td> </tr>';
         }          

         $$('.data-table table').html(tableHtml);         
       })  
     }
    );
  });
});

到目前为止，这很好用，只要数据表与触发扫描仪功能的按钮位于同一页面上：

<div class="data-table card">        
  <table>                        
    <tbody>
    </tbody>
  </table>
</div>

但是，我需要该功能来打开不同的页面并在那里创建表格。我已经尝试添加..

mainView.router.navigate('/results/')

.. 到脚本，但该函数只打开新页面并且不创建表。我可以在新页面上看到控制台中记录的 JSON 数据，但不知道为什么它无法建表。

标签： javascriptphonegaphtml-framework-7

解决方案

我认为您必须通过路由将参数传递到页面（componentUrl）。

scan_result.html

<template>
    .......
    <div class="data-table card">
        <table>
            <tr>
                <td class="numeric-only" id="brand">{{ $route.params.brand }} </td>
            </tr>
            <tr>                
                <td class="numeric-only" id="model">{{ $route.params.model }} </td>
            </tr>
        </table>
    </div>

</template>
<script>
    return {
        on: {

            pageAfterIn: function (e, page) {

                //or you can call params here
                var result_brand = this.$route.params.brand;
                var result_model = this.$route.params.model;

            }
        }
    }
</script>

路由.js

{
    path: '/results/:brand?/:model?/',
    componentUrl: 'scan_result.html',
},

导航

mainView.router.navigate('/results/'+data[0].brand+'/'+data[0].model+'/')

参考

https://framework7.io/docs/router-component.html#single-file-component https://framework7.io/docs/view.html#view-parameters

推荐阅读