[SOLVED] Access app.data

Questions
#1

Hello folks,

Javascript isn’t really my forte but I’m moving forward, but I wanted to share some stuff in the app.data object . What moronic thing am I doing wrong? :slight_smile:

var app = new Framework7({
    id: 'myapp',
    root: '#app',
    theme: theme,
    routes: [
        {
            path: '/main/',
            url: './pages/main.html',
            name: 'home',
        },
        {
            path: '/',
            url: './splash.html',
            name: 'splash',
        }
    ],
    uid: i,
    data:function(){
        return this.theme;
    }
});

console.log(app.data())

In a nutshell, why does app.data() throw an error. What am I supposed to call?

How to aceess root data?
#2

console.log(app.data)

#3

thats what I did the first time around, it just says “undefined”

#4

app data MUST return an object on initiliazation. To access app data you must access just a app.data without a function call:

...
data() {
  return {
    theme: this.theme,
  };
},

And to access it app.data.theme

#5 
var app = new Framework7({
    id: 'faboroto.linkmyfilm',
    root: '#app',
    theme: theme,
    routes: [
        {
            path: '/main/',
            url: './pages/main.html',
            name: 'home',
        },
        {
            path: '/',
            url: './splash.html',
            name: 'splash',

        },
        {
          path: '/menu',
          url: './pages/menu.html',
          name: 'menu'
        }
    ],
    uid: i,
    data() {
        theme: this.theme
     }
});



console.log(app.data.theme)



Uncaught TypeError: Cannot read property 'theme' of undefined
#6

I think you should return an object { theme: this.theme }. In your code, the return word is missing.

#7

I give up, isn’t there an example somewhere I can try? :slight_smile:

#8

simply copy and paste the code that Vladimir posted above. Your last code is not the same as what he suggested.

#9 
var app = new Framework7({
    id: 'myapp',
    root: '#app',
    theme: theme,
    routes: [
        {
            path: '/main/',
            url: './pages/main.html',
            name: 'home',
        },
        {
            path: '/',
            url: './splash.html',
            name: 'splash',

        },
        {
          path: '/menu',
          url: './pages/menu.html',
          name: 'menu'
        }
    ],
    uid: i,
    data() {
      return {
        theme: this.theme
     }
   }
});

console.log(app.data.theme)

which results in

Uncaught TypeError: Cannot read property 'theme' of undefined

Which is the same as this mornings effort.

#10

Hi @buggtb,

You need declare theme variable like below.

var theme=‘auto’; //dynamic based on device OS
or
var theme=‘md’; //Material theme
or
var theme=‘ios’; //ios theme

#11

https://jsfiddle.net/nolimits4web/rdphx056/

#13

Hi @nolimits4web I tried the way you have mentioned in JS Fiddle but when I am trying to access the same in any HTML template I am getting error that data is not defined.

I tried accessing with these ways in HTML within template7
{{$root.data.imgsrc}}
{{$app.data.imgsrc}}
{{app.data.imgsrc}}

But every line game me same error.

Can you give a fiddle for accessing same value in HTML template.

Right now I am using Framework Version 4.0.1.

My App initialization code is as below:

var app = new Framework7({
  id: 'com.xxx.xxx',
  root: '#app',
  name: "XXX",
  theme: theme,
  precompileTemplates: true,
  template7Pages: true,
  panels3d: {
    enabled: true,
  },
  dialog: {
    title: 'XXX',
  },
  lazy: {
    threshold: 100,
    sequential: false,
    placeholder: 'img/load_img.gif',
  },
  data: function () {
    return {
      img:  'https://my13.digitalexperience.ibm.com/073f3882-34a2-4535-b2bc-b0471e2fedbb/dxdam/sit/media/images/products',
    };
  },
  methods: {
    
  },
  routes: routes
});

Thanks in advance.

#14

in templates you can access the app global variable like that:

data: function () {
var self = this;
console.log(self.$app.theme); //to output the theme selected
}

#15

Hi @Bruno_Giubilei thank you for your response, I am able to get it in data function on the template page but I am not able to return it to HTML template where I want to show it.

#16

It must be just {{$root.imgsrc}}

#17

Hi @nolimits4web,

Initialization:
I did try the suggested code but i encountered this error again here are my code snippet and errors.

var app = new Framework7({
  id: 'com.xxxx.shop',
  root: '#app',
  name: "XXXX",
  theme: theme,
  precompileTemplates: true,
  template7Pages: true,
  panels3d: {
    enabled: true,
  },
  dialog: {
    title: 'XXXX',
  },
  lazy: {
    threshold: 100,
    sequential: false,
    placeholder: 'img/load_img.gif',
  },
  data: function () {
      return {
          imgsrc: 'https://my13.digitalexperience.ibm.com/xxxxxxxxxxx/dxdam/sit/media/images/products'
      }
  },
  methods: {
    
  },
  routes: routes
});

HTML Code:

06%20PM
Screen Shot 2019-02-15 at 2.08.06 PM.png1650×1132 160 KB

Error:

54%20PM
Screen Shot 2019-02-15 at 2.03.54 PM.png1430×318 84.4 KB

Kindly help to identify what is going wrong in my code.

#18

You need to learn how Template7 works http://idangero.us/template7/
If you do something inside of {{#each}} then it is in different context, then it should be {{../$root.imgsrc}}

#19

Hi @nolimits4web,

thank you for the response, it might be working in some scenarios but it didn’t work in mine, but I handled it with Template7 custom helpers.

#20

I have the same problem. I will try to explain what I think it’s happening looking at F7 source code.

Property data is created on init() function, that in case of used with Cordova device, waits to be called when event deviceready is launched by system.

In my case, when I try to use app.data inmediateley after var f7App = new Framework7(…), I get the same error. So I have to use constructor param initOnDeviceReady:false