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