Блог

Я новичок в 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,
});
  

Хорошо, теперь ваш вопрос понятнее. Смотрите страницу компонента ниже для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',
    },
],
  

Смотрите объяснение документов здесь.