Framework7 将数据传递给 html

Question

我是 framework7 的新手，只是尝试将应用程序根数据传递给 html。这是我的app.js。

var app = new Framework7({
    root: '#app', // App root element
    id: 'io.framework7.testapp', // App bundle ID
    name: 'Framework7', // App name
    theme: 'auto', // Automatic theme detection

   // App root data
   data: function () {
       return {
         username: 'john' 
     };
  },  
});

那么如何使用 js 模板将数据传递到 index.html？我试过下面的代码，但是我得到了 Illegal return statement error...

<template>
  <p>Hello, my name is {{name}} </p>
</template>

<script>
  return {
     data: function () {
        return {
          name: this.$root.username,
     };
  }
 };
 </script>

如果有人能帮助我，我将不胜感激。

更新：我累了

{{ $root.userName }}

在索引页中，它不起作用，但在其他页面中起作用，是否意味着我需要替换索引页中的所有内容，然后尝试在索引页中使用模板渲染来访问根数据？我真的不知道我应该用它做什么......请帮忙......

Answer 1

你不能像其他页面一样将数据直接传递到索引页面，你需要一些技巧来做到这一点：

1) 通过 using/build 配置初始页面路由：Initial Page Route，这样你需要尝试通过使用将普通 index.html 转换为组件 html组件模板或 URL ..etc，在我的项目中我使用第二种方式的任何方式。

2) 使用 Template7 的第二个解决方案如下： JS:

// init dom script
var MainMenuTemplate         = $$('script#mainMenuScriptTemplate').html();
var compiledMainMenuTemplate = Template7.compile(MainMenuTemplate);
//...inside app or you can create app.on('init') as you like....
on: {
      pageInit: function (page) {
        if(page.name == 'home'){
            var html = compiledMainMenuTemplate({"userName": "Anees"});
            $$('#main-menu-wrapper').html(html);
        }
      },
  },
//..

Html:

<script id="mainMenuScriptTemplate" type="text/template7">
                <div class="navbar">
                    <div class="navbar-inner">
                            <a href="#" data-panel="panel-left" class="link panel-open icon-only">
                                <i class="icon f7-icons ios-only">menu</i>
                                <i class="icon material-icons md-only">menu</i>
                            </a>
                            <div class="title">{{userName}}</div>
                    </div>
                </div>
            </script>
            <div id="main-menu-wrapper"></div>

Framework7 将数据传递给 html

Framework7 pass data to html

html-framework-7