Component page methods

I understand a component page can have methods that can be triggered through events like pageInit or from within the template page using @click on a link, but i cannot find out how i can trigger these methods though other means. For instance my client receives a push that is bound to a listener, which i need to trigger a method on my component page. In my example below, how would i trigger the updateBalance() event with something other than something like pageInit or @click? i need to have a function outside of this that can trigger that updateBalance method. I need this method to be called by an event other than what is available in on:

//an example of what my pusher.js listener looks like
pushChannel.bind('user_updated', function(data) {
	updateBalance();
});

return {
	data: function () {
		return  {
			title: 'my page',
		}
	},
	methods: {
	  updateBalance: function () {
		 //do my update
	  }
	},
	on:{
	  pageInit: function (e, page) {
		//somthing like this does me no good
	  }
	}
}
// your app.js
var app = new Framework7(...);

//an example of what my pusher.js listener looks like
pushChannel.bind('user_updated', function(data) {
  updateBalance();
  // emit global app event
  app.emit('updateBalance');
});

// component
return {
	data: function () {
		return  {
			title: 'my page',
		}
	},
	methods: {
	  updateBalance: function () {
		 //do my update
	  }
	},
	on:{
      pageInit: function (e, page) {
        //listen for update balance event
        this.$app.on('updateBalance', this.updateBalance);
	  },
	  pageBeforeRemove: function (e, page) {
		//detach event listener when page removed
        this.$app.off('updateBalance', this.updateBalance);
	  },
	}
}
3 Likes

works exactly the way i needed. thank you.

I ran into a secondary issue with this, if i try to pass a variable to updateBalance function i get errors.

Uncaught ReferenceError: data is not defined when i try this:

// your app.js
var app = new Framework7(...);

//an example of what my pusher.js listener looks like
pushChannel.bind('user_updated', function(data) {
  updateBalance();
  // emit global app event
  app.emit('updateBalance',data);
});

// component
return {
	data: function () {
		return  {
			title: 'my page',
		}
	},
	methods: {
	  updateBalance: function (data) {
		 //do my update
	  }
	},
	on:{
      pageInit: function (e, page) {
        //listen for update balance event
        this.$app.on('updateBalance', this.updateBalance(data));
	  },
	  pageBeforeRemove: function (e, page) {
		//detach event listener when page removed
        this.$app.off('updateBalance', this.updateBalance(data));
	  },
	}
}

updateBalance(); - remove

this.$app.on('updateBalance', this.updateBalance(data)); => this.$app.on('updateBalance', this.updateBalance);

and for โ€œoffโ€

2 Likes

this does seem to work. i assumed i had to have the function arguments in the on event but apparently not. They are passed through now.

@shastox is right, this is correct syntax:

this.$app.on('updateBalance', this.updateBalance); 

and

this.$app.off('updateBalance', this.updateBalance);
2 Likes