Framework7 передать данные в HTML - PullRequest
Новая
       9

Framework7 передать данные в HTML

0 голосов
/ 07 ноября 2018

Я действительно новичок в 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' 
     };
  },  
});

Так как я могу передать данные в index.html с помощью шаблона js? Я пробовал следующий код, но я получил ошибку оператора незаконного возврата ... 

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

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

Буду признателен, если кто-нибудь сможет мне помочь.

Обновление: Я устал 

{{ $root.userName }}

на странице индекса, она не работает, но она работает на других страницах, это значит, что мне нужно заменить все содержимое страницы индекса, а затем попытаться использовать разметку шаблона на странице индекса для доступа к корневым данным ? Я действительно понятия не имею, что мне с этим делать ... Пожалуйста, помогите ...

1 Ответ

0 голосов
/ 08 ноября 2018

Вы не можете передавать данные на индексную страницу напрямую, как на другую страницу, у вас есть несколько хитростей, которые вам необходимы для этого:

1) с помощью / build конфигурации для начального маршрута страницы: Initial Page Route , таким образом, вам нужно попытаться преобразовать обычный index.html в html компонента, используя шаблон компонента или URL. и т. д. Любым способом в своих проектах я пользуюсь вторым способом.

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