获取JSON并在其他页面上构建HTML表(Phonegap + Framework7) [英] GET JSON and build HTML table on a different page (Phonegap + Framework7)

问题描述

我正在使用 Framework7 构建移动应用程序，该应用程序会扫描QR码(使用

I am building a mobile app using Framework7 that scans a QR code (using this Phonegap plugin) that contains a JSON URL and GETs the relevant data. The data is then used to generate and populate a table. This is what my code looks like:

$$(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);         
       })  
     }
    );
  });
});

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

So far this works great, as long as the data-table is on the same page as the button which triggers the scanner function:

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

但是，我需要功能来打开另一个页面并在那里创建表.我尝试添加..

However, I need the function to open a different page and create the table there. I have tried adding..

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

..到脚本，但是该功能仅打开新页面而不创建表.我可以在新页面上看到在控制台中记录的JSON数据，但是我不知道为什么它不能构建表.

.. to the script, but the function only opens the new page and doesnt create a table. I can see the JSON data logged in the console on the new page, but I don't know why it cannot build the table.

推荐答案

我认为您必须通过路由将参数传递给页面(componentUrl).

i think you must pass parameters via route to a page (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>

routes.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

这篇关于获取JSON并在其他页面上构建HTML表(Phonegap + Framework7)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！