[SOLVED] Access app.data


#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?


#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:

Error:

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.