Можно ли добавить определенный JavaScript на новую HTML-страницу в framework7? - PullRequest
Новая
       16

Можно ли добавить определенный JavaScript на новую HTML-страницу в framework7?

0 голосов
/ 24 апреля 2019

Я новичок в framework7, и я создаю новую страницу в моем приложении framework7.Я хочу иметь возможность добавить определенный код javascript, такой как <script type="text/javascript" src="sample.js"></script>, в новый HTML-файл страницы, используя framework7.Например, это моя новая страница, которая состоит только из кнопки «попробовать».

<template>

    <div class="page">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="title">{{title}}</div>
            </div>
        </div>
            <div class="page-content">
                    <button class="sample">try</button>
                </div>
            </div>

</template>
<script type="text/javascript" src="Exp.js"></script>

Итак, на новой странице, как вы можете видеть, я добавил <script type="text/javascript" src="Exp.js"></script>, который представляет собой файл JavaScript с именем Exp.js, который выглядит следующим образом 

\\ "try" button event listener
document.querySelector('.sample').addEventListener("click", function () {
alert(works);
});

Так что же этоделает всякий раз, когда я нажимаю кнопку «попробовать» на странице, должно появиться предупреждение «работает», но это не работает.

Можно ли как-нибудь добавить такие файлы javascript?или невозможно в framework7 добавить такие файлы javascript?Пожалуйста, помогите мне с ответом

И это мое приложение Framework7 инициализировать файл JS. 

var myApp = new Framework7({
    // App root element
    root: '#app',
    // App Name
    name: 'My App',
    // App id
    id: 'com.myapp.test',

    // Enable swipe panel
    panel: {
        swipe: 'left',
    },
    // Add default routes
    routes: [
        {
            path: '/about/',
            url: 'about.html',
        },
        {
            path: '/Expenses/',
            componentUrl: 'Expenses.html',
        },
    ],

    // ... other parameters
});

// Add view
var mainView = myApp.views.create('.view-main', {
    // Because we want to use dynamic navbar, we need to enable it for this view:
    stackPages: true,
});

1 Ответ

0 голосов
/ 27 апреля 2019

Хорошо, теперь ваш вопрос прояснился.См. Страницу компонента ниже для файла Expense.html .Это «более официальный» способ работы в Framework7.Это может быть немного новым, в зависимости от того, какой у вас фон JavaScript.У вас есть файл компонента, содержащий шаблон html, функции javascript и данные.

Сценарий - это место, где вы определяете данные и методы, которые будут использоваться на странице вашего компонента.Я создал функцию под названием alertWorks , которая в основном делает то, что вы пытались сделать.Затем я вызвал эту функцию, используя обозначение «@click» на кнопке.Вот как я добавил свой обработчик события в событие нажатия кнопки.Я также пошел немного дальше, чтобы создать некоторые данные для переменной title , которую вы использовали в верхней части страницы.Это просто базовые сведения, но они должны помочь познакомить вас с F7. 

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">{{title}}</div>
      </div>
    </div>
    <div class="page-content">
      <button class="sample" @click="alertWorks">try 1</button>
    </div>
  </div>
</template>

<script>
  return {
    data: function () {
      return {title: "Button Page"};
    },
    methods: {
      alertWorks(e) {
        alert('works');
      },
    }
  }
</script>

И тогда ваш маршрутизатор будет выглядеть примерно так 

routes: [
    {
        path: '/about/',
        url: 'about.html',
    },
    {
        path: '/Expenses/',
        componentUrl: 'Expenses.html',
    },
],

См. Объяснение docs. здесь.

...