Beginner: Where to put javascript?


just started with Framework7 and can´t figure out where to put javascript.

I have a button in home.f7.html:
<a href="#" class="button button-raised button-fill" id="LoadData" >Load data</a>

and in src/js/app.js

$$('#LoadData').on('click', function () {

when trying to insert

	function loadData(){

in index.html or home.f7.html it does not show up in my app.

hi, if you dont use components, place all your code in app.js

i suggest you to use components;

Thanks for the fast reply.

Components seems interesting, but step by step…
So first a solution with app.js

I have
function loadData(){ alert("load"); };

in src/js/app.js


<a href="#" onclick="loadData()">Test</a>

in home.f7.html.

Result: (index):33 Uncaught ReferenceError: loadData is not defined


var $$ = Dom7;
var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'myApp',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  theme: 'ios',
  // Add default routes
  routes: [someRoutes],
  methods: {
    myFnc () {
      let vm = this
      // Use Framework-7 alert
      // Or native alert
  // ... other parameters
var mainView = app.views.create('.view-main');

$$('.my-btn').on('click', app.methods.myFnc)


   <a href="#" class="button button-raised button-fill" @click="loadData">Load data</a>
  export default {
    // ...
    methods: {
      loadData() {

Thanks - the home.f7.html from nolimits4web works.

In the app.js solution from pvtallulah the native alert fires on load, not on click. The Framework-7 alert does not fire.

Placed in routes was also not successful

var routes = [
    path: '/',
    component: HomePage,
     methods: {
	 	loadData: function(){
	 	let vm = this;
      // Use Framework-7 alert

loadData was not found.

Thank you anyway, I will deal with the solution to place it in the html page. Maybe I will understand the rest after more experience with Framework7 - which is a great tool so far.

Sorry to call for help again. Somehow I am missing some basics.
Now I want to use an external js library.
Placed in app.js

import Dexie from 'dexie';

Works fine, in app.js I have access to Dexie.
But not in my home.f7.html file. What do I have to do to use Dexie there?

You should also do import Dexie from 'dexie'; in home.f7.html