Best practice for outside messages/calls on components?

Questions
1

Hi there,

I am using the latest Framework7 (3.4.0 at the time of this question) and am using componentURLs in my routes file to keep things organized and separate the logic on each page.

I have a different class/js file that uses PhoneGap’s push notifications to register and retrieve messages. What I am curious about is the best way to reference or call the page/context that is currently in front? Ie: I get a text message from the server using the messages page/component and want to display it on the page?

Of course I can make a global variable linking the current messages variable and then make a call to GLOBALMESSAGESVARIABLE.addMessage({}) but is that the best way to reference the messages component in the current visible page/component from the outside like I am doing?

I am also implementing web sockets to handle “user is typing…” notices but I don’t like having to use global variables and putting my page logic in a seperate JS file when I want to keep all logic inside the component itself.

The other thing I am thinking is keeping a global variable that is linked to the currently loaded component at all times but that means adding code to every page in the “pageBeforeIn” and “pageBeforeOut” events to update that component global variable reference.

Thoughts?

  • Matt
2

For such cases when you need to transfer data between components and modules, you need to use events. For example:

Let’s assume you have access to F7 instance (app) everywhere, it maybe a global var if required;

var app = new Framework7();

In place where your receive Push Notification to add message:

app.emit('receiveMessage', someDataObject);

In component with messages, you can do the following:

return {
  ...
  mounted: function () {
    // attach event listener
    this.$app.on('receiveMessage', this.handlePushMessage);
  },
  beforeDestroy: function () {
    // detach listener on component destroy
    this.$app.off('receiveMessage', this.handlePushMessage);
  },
  methods: {
    handlePushMessage: function (someDataObject) {
       // do something
    }
  },
}
1 Like
3

Perfect! This is exactly what I needed to know.

Thank you for building this, I just became a Patreon supporter. This is a great framework.

  • Matt
1 Like
4

Awesome, thanks mate! :wink: