framework7 组件页面不适用于真实的数据库查询

Question

在 framework7（最新版本）中有一些示例页面，例如页面加载器-component.html。此页面有 -

<p>Hello {{name}}</p>

底部还有脚本

return {
 data: function(){
  return{
  name: "Peter"
  }
 }
}

现在访问该页面时，它显示 - 你好彼得

问题是我想从我的服务器的真实数据库中获取名称。所以我做了这个改变 -

app.request.post(
 'http://domain-name/page.php',
 {userid: 2},
 function(response){
  var response = JSON.parse(response);
  console.log(response); //console log shows {name: "Peter"}
  return response
 }
);

return {
 data: function(){
 return response //console log shows response is not defined
 }
}

现在，当尝试访问该页面时，它会抛出错误（在控制台中）- ReferenceError: response is not defined。在控制台中，我的请求查询正常，它显示 - {name: "Peter"}

我做了 return 响应并尝试替换函数的位置，并尝试了 Whosebug 上建议的许多其他可能的修复方法。

我认为一个函数运行在另一个函数完成数据库查询之前。我不是专家（只是一般）。所以请有人建议。

我也尝试通过 routes.js 访问该页面，如请求和 load.html 中给出的示例，但仍然引用错误。

Answer 1

我认为你必须经过 async route 才能加载页面上下文 (c.f。F7 doc) 您将能够通过 resolve 回调

加载数据

也许一个例子可以提供帮助：async data for page

Answer 2

return response 在 data: 部分内。请求不是，他们无法互相联系。

将数据收集放在数据函数中。您还希望将响应保存在请求函数之外。确保响应变量可达。我也会亲自将请求本身移动到一个单独的位置来定义，以便在这个实例之外使用。

文件：custom.js

requests = {
    GetName: function () {
        app.request.post(
            'http://domain-name/page.php',
            { userid: 2 },
            function (response) {
                var response = JSON.parse(response);
                console.log(response); //console log shows {name: "Peter"}
                return response
            }
        );
    },
    GetNameDynamic: function (id) {
        app.request.post(
            'http://domain-name/page.php',
            { userid: id},
            function (response) {
                var response = JSON.parse(response);
                console.log(response); 
                return response
            }
        );
    }
}

然后在 data: 部分调用该函数并保存为变量。在数据 return 中传递它。

data: function () {
          // Must return an object
          var result = requests.GetName();
          return {
              name: result.name,
          }
      },

还有其他 ways/locations 可以完成此任务。正如其他用户提到的那样，一个是路由中的异步。在路由数组中，只需将路径和组件Url 更改为正确的即可。

{
        path: '/post-entity-group/:type/:group/:public/',
        async: function (routeTo, routeFrom, resolve, reject) {
            var result = requests.GetName();

            resolve(
                {
                    componentUrl: './pages/post-entity.html',
                },
                {
                    context: {
                        name: result.name,
                    }
                }
            )
        }
    },

framework7 组件页面不适用于真实的数据库查询

framework7 component page not working with real database query

javascript

html-framework-7