Question

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

<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);
});

所以它的作用是每当我单击页面中的“尝试”按钮时，它都会提醒“有效”，但这是行不通的。

有什么办法可以添加这样的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中的“更正式”的处理方式。根据您的JavaScript背景，它可能有点新。您有一个包含html模板，javascript函数和数据的组件文件。

脚本部分是您定义要在组件页面中使用的数据和方法的地方。我创建了一个名为 alertWorks 的函数，该函数基本上可以完成您想做的事情。然后，我使用按钮上的“ @click”符号调用了该函数。这就是我将事件处理程序添加到按钮的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的新html页面中添加某些javascript？

1 个答案: