V5 to V6 how to migrate app.js methods and data()?

1

how to migrate app.js that was using methods, helpers and app() to v6 correctly?

import $ from 'dom7';
import Framework7, {
  Template7
} from 'framework7/framework7.esm.bundle.js';
import * as MarkerClusterer from "@google/markerclusterer";


Template7.registerHelper('ratingScore', function (reviews, options) {
  'use strict';
...

});


// Import F7 Styles
import 'framework7/css/framework7.bundle.css';

// Import Icons and App Custom Styles
import '../css/icons.css';
import '../css/app.scss';
// Import Cordova APIs
import cordovaApp from './cordova-app.js';
// Import Routes
import routes from './routes.js';

// Import main app component
import App from '../app.f7.html';

import i18next from 'i18next';

import Backend from 'i18next-http-backend';
import {
  forEach
} from '../template7-helpers-list';

var app = new Framework7({
  root: '#app', // App root element
  component: App, // App main component
  id: 'com.app.app', // App bundle ID
  name: 'appname', // App name
  theme: 'auto', // Automatic theme detection
  view: {
    stackPages: true,
    //iosDynamicNavbar: false,
    //xhrCache: false,
  },
  lazy: {
    threshold: 50,
    sequential: false,
  },
  card: {
    backrop: false,
    closeByBackdropClick: false,
  },
  data: function () {

    i18next.init({
        lng: 'it',
        debug: true,
        resources: {
          en: {
            translation: {}
          },
          es: {
            translation: {}        
            }
         },
        }
      },
      function (err, t) {
        if (err) return console.log(err);
        console.log('i18n initialized!');
      });
    
    });

    return {
      lockLangTo: 'en'
    };

  },
  methods: {

    helloWorld: function () {
      app.dialog.alert('Hello World!');
    },

    registerUser: function () {

      var self = this;
      console.log('registering user...');

    },

  },

  // App routes
  routes: routes,

  // Input settings
  input: {
    scrollIntoViewOnFocus: Framework7.device.cordova && !Framework7.device.electron,
    scrollIntoViewCentered: Framework7.device.cordova && !Framework7.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);
      }

    },
  },
});

var abortController = app.request.abortController();

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  window.open = cordova.InAppBrowser.open;
  console.log(navigator.camera);
}


var view = app.views.create('.view-main', {
  on: {
    pageInit: function () {
      console.log('page init')
    }
  }
})

also need to know how to run methods in app.js in v6
appreciate a lot the support!

2

Using Store https://framework7.io/docs/store.html

3

what about calling the action method there from anywhere in the app?

so?

$store.dispatch('registerUser');?

handlebars should still be working in v6 as before? where should I put the declarations of handlebars helpers?

Template7.registerHelper('ratingScore', function (reviews, options) {
...
});

and where is it the template7-helpers-list.js and where to import it?

thanks

4 
import store from 'path/to/store.js';

store.dispatch('...');

No, Template7 is removed from v6 https://framework7.io/docs/migration-from-v5.html#template7

5

uhmm so there is no way to use handlebars!

another thing I am having issues this is the store.js:


import { createStore } from 'framework7';
import i18next from 'i18next';

var store = createStore({
  state: {
    lockLangTo: "en",
    users: null,
    usersLoading: false,
  },
  getters: {
    usersLoading({ state }) {
      return state.usersLoading;
    },
    users({ state }) {
      return state.users;
    }
  },
  actions: {
    helloWorld() {
      app.dialog.alert('Hello World in store.js');
    },
    loadUsers({ state }) {
      console.log('loading users...');

      state.usersLoading = true;
      setTimeout(() => {
        state.usersLoading = false;
        state.users = ['Aaron', 'Alexander', 'Candy', 'Chloe', 'Vladimir'];
      }, 3000);
    },
  },
})
export default store;

if I call it from home page using

$on('pageInit', function (e, page) {
      console.log('pageInit', page);



      setTimeout(() => {
        console.log('in store.js')
        $store.dispatch('helloWorld');
      }, 10000);


    })
...

the console says undefined because app not defined! so ho can I define inside store.js app for this to working inside store.js?

app.dialog.alert('Hello World in store.js'); //not working

error

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'app.dialog.alert')

thanks for any help!

6

app is undefined in your code. You can pass app instance to action as argument https://framework7.io/docs/store.html#dispatching-actions

7

is it possible too see a sample of your code using app.dialog.alert inside an action passing app instance as argument in the store.js?

Still undefined for me and I really need to have actions that use the app instance inside store.js!

thanks!

8

In component

$store.dispatch('someaction', { $f7 })
1 Like
9

We are talking about some basic JS things, how to pass variable? Simples case, create global window.app instance and it will be available everywhere

10

This is what I did but not working I had to re-install f7 again maybe something mixed up

$store.dispatch('helloWorld', $f7 )

  actions: {
    helloWorld({ state }, app) {
      console.log('loading helloWorld...');
      console.log(app)
      app.dialog.alert('Hello World in store.js');
    },
    loadUsers({ state }) {
      console.log('loading users...');

      state.usersLoading = true;
      setTimeout(() => {
        state.usersLoading = false;
        state.users = ['Aaron', 'Alexander', 'Candy', 'Chloe', 'Vladimir'];
      }, 3000);
    },
  },

I will use the brackets { $f7 }

11

in my case f7 with a new clean reinstall of f7 fixed the issue! I was not using brackets before but now it works with or without!