"data" and "methods" property on "App / Core" and "Page"

Questions
1

I dont understand the data property. Is this right the use case for that:

  • for app: put any application data within “data”-object which can be used for the “app”
  • for page: put any page data within “data”-object which can be used for the “page”

But why data accepts a function and not only a object?

// the same as data: function(){return hobbies;}
data: () => hobbies

instead of:

data: hobbies;

Is this because, with function we can make something like:

data.hobbies.callMethod() ?

But for this the property, “methods” exits, or? So “methods” are all user-defined methods which is only stored within the app-instance. F7 does not make use of it, only the application code. Or?

Or are the use cases for data-property and methods-property different? Has it something to do with router?

2 
framework7.js:3111
// Data
app.data = {};
if (app.params.data && typeof app.params.data === 'function') {
  Utils.extend(app.data, app.params.data.bind(app)());
} else if (app.params.data) {
  Utils.extend(app.data, app.params.data);
}
// Methods
app.methods = {};
if (app.params.methods) {
  Utils.extend(app.methods, app.params.methods);
}
3
4

? I only want to know, for what the data-property and the methods-property is for? Not, how they are working. Any use cases? Is the use case above such a use case?

F7 also has the “options.context” property on routes where I can store data/methods. Are they for same use cases?

5

The “routes” has also a data and method-object. I think, they all serve the same purpose. to provide a store of user-related data and methods. Correct me if I am wrong.

6 
var theme='ios';
var obj={
  theme:'md',
  data:function(){
    return this.theme;
  }
};
var test=obj.data;
console.log(obj.data());       // => 'md'
console.log(test());           // => 'ios'
console.log(test.bind(obj)()); // => 'md'
7

ok, thanks now its clear.

8

data and methods are only for own usage in Router components and in your custom logic. They are not used internally by Framework7, so just to make life and data sharing a bit easier, especially or router components which is compiled in own context. Basically means the same as data and methods in Vue components