是否可以在 framework7 中将某个 javascript 添加到新的 html 页面？

Question

我是 framework7 的新手，我正在我的 framework7 应用程序中创建一个新页面。我希望能够使用 framework7 添加某个 javascript 代码，例如 <script type="text/javascript" src="sample.js"></script> 到新页面 html 文件中。例如，这是我的新页面，其中仅包含一个 "try" 按钮。

<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>，这是一个名为 Exp.js 的 javascript 文件，看起来像这样

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

所以它的作用是每当我单击页面中的 "try" 按钮时，它应该提醒 "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,
});

Answer 1

好的，你的问题现在更清楚了。请参阅下面的 Expense.html 文件的组件页面。这是 Framework7 中的 "more official" 做事方式。它可能有点新，具体取决于您的 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 explanation。

是否可以在 framework7 中将某个 javascript 添加到新的 html 页面？

Is it possible to add a certain javascript to a new html page in framework7?

html

javascript

html-framework-7