Call F7 Component outside app

Questions
1

I have a collection of functions stored in functions.js file that I include to the app.

One of the functions processes data from ckeditor in a custom built saving function. I would like to open a preloader or progressbar from my function in the functions.js file, that is defined outside the initialized F7 app.

How can I do this? How can I call F7 components from a function that is defined outside the app initialization?

1 Like
2

I need to do the same and i don’t achieve it.

Anyone could help us?

3

I think I would try and make the save function as generic as possible then maybe trigger the preloader outside and call the save function passing in a callback function to cancel the preloader… something like that.

Another option might be for your save function to create a few custom events and use those to trigger progress bars and such like.

4

You can save a global reference when initializing Framework7:

window.f7app = Framework7.initialize({
  ...
});

And then you can call for example preloader module functions from your custom functions.js like this:

window.f7app.preloader.show();

It is also possible to get the F7 component for a specific page, to access component methods or variables.

If you give your page element a name:

<div class="page" data-name="pages.mypage">

You can access your component methods like this:

$('[data-name="pages.mypage"]')[0].f7Component.myMethod()

1 Like
5

Thank you @Tim

What do you think about the following solution? Could it cause any memory/performance leak in the application?

app,js

var myApp = new Framework7({
   ...
});
export default myApp;

In js file:

import myApp from '@/js/app.js';

myApp.preloader.show();
6

I don’t think it makes any difference, in fact I think the generated code works out the same way :slight_smile:

1 Like
7

Instead of having a hard reference to f7, create a proxy in the event you want to update f7 or the underlying behaviours so e.g.

import myApp from '@/js/app.js';
export const showPreloader = () => myApp.showPreloader();
export const hidePreloader = () => myApp.hidePreloader();

Then use the showPreloader / hidePreloader where necessary, and if you want to change the underlying implementation - you are free to do so.

8

Thanks! Worked well.