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？我尝试了以下代码，但返回了非法的返回语句错误...

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

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

如果有人能帮助我，我将感到非常感谢。

更新：我累了

{{ $root.userName }}

在索引页面中不起作用，但是在其他页面中却起作用，这意味着我需要替换索引页面中的所有内容，然后尝试在索引页面中使用模板呈现来访问根数据？我真的不知道该怎么办...请帮助...

Answer 1

您不能像其他页面一样直接将数据传递到索引页面，您需要执行一些技巧：

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

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

1 个答案: