Beginner: Where to put javascript?

Questions
1

Hi,

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 () {
   alert('Hello');
});

when trying to insert

<script>
	function loadData(){
	alert("load");
};
</script>

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

2

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

i suggest you to use components;

https://framework7.io/docs/router-component.html

3

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

and

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

in home.f7.html.

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

4

app.js

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
      vm.dialog.alert('load')
      // Or native alert
      alert("load")
    }
  }
  // ... other parameters
});
var mainView = app.views.create('.view-main');

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

home.f7.html

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

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
    	  vm.dialog.alert('Load');
		  alert("Load");
    }
  },    
  },

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.

7

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?

8

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

9

I’m sorry in reopen this post, but I’m trying to include Dexie in a cordova project and I don’t know what I’m doing wrong. In app.js I imported deaxi.min.js file and added the Dexie-Test code-lines (see below). The code works fine in the development server. However in the android emulator I get the error.:
Uncaught ReferenceError: Dexie is not defined
at HTMLDivElement. (index.30fc6b88.js:183)
at HTMLDocument.s (index.30fc6b88.js:4)
at Jt.Ro [as trigger] (index.30fc6b88.js:4)
at Mt.pageCallback (index.30fc6b88.js:26)
at _a (index.30fc6b88.js:24)
at f (index.30fc6b88.js:24)
at index.30fc6b88.js:26
at index.30fc6b88.js:26

Should I also import diexie.min.js somewhere else?

//-----------------------------------------------------------------
import $ from ‘dom7’;
import Framework7, { getDevice } from ‘framework7/bundle’;
// Import F7 Styles
import ‘framework7/css/bundle’;
// Import Icons and App Custom Styles
import ‘…/css/icons.css’;
import ‘…/css/app.css’;
// Import Cordova APIs
import cordovaApp from ‘./cordova-app.js’;

// Import Routes
import routes from ‘./routes.js’;
import ‘./dexie.min.js’;

// Import main app component
import App from ‘…/app.f7’;
var device = getDevice();

var app = new Framework7({
name: ‘f7Dexie01’, // App name
theme: ‘auto’, // Automatic theme detection
el: ‘#app’, // App root element
component: App, // App main component
id: ‘io.framework7.myapp’, // App bundle ID
// App routes
routes: routes,
// Input settings
input: {
scrollIntoViewOnFocus: device.cordova && !device.electron,
scrollIntoViewCentered: device.cordova && !device.electron,
},
// Cordova Statusbar settings
statusbar: {
iosOverlaysWebView: true,
androidOverlaysWebView: false,
},
on: {
init: function () {
var f7 = this;
if (f7.device.cordova) {
// Init cordova APIs (see cordova-app.js)
cordovaApp.init(f7);
}
},
},
});

$(document).on(‘page:init’, ‘.page[data-name=“home”]’, function (evt, page) {
var db = new Dexie(“FriendDatabase”);
db.version(1).stores({
friends: “++id,name,age”
});
//
// Manipulate and Query Database
//
db.friends.add({ name: “Josephine”, age: 21 }).then(function () {
return db.friends.where(“age”).below(25).toArray();
}).then(function (youngFriends) {
alert("My young friends: " + JSON.stringify(youngFriends));
}).catch(function (e) {
alert("Error: " + (e.stack || e));
});
})