What's the best way to make sure a page is always updated with the latest data?

1

I have a Bookmarks page that I’m using to display a user’s bookmarks. Users can add and delete bookmarks from anywhere in the app (even across views), but I want the Bookmarks page to always reflect the current bookmarks.

Right now, I’m using the Pull-To-Refresh feature on the Bookmarks page, but that has to be updated manually. Is there a better way to keep a page content current without the user having to do anything?

Here are some options I’m considering:

  1. Calling refreshBookmarks() on pageBeforeIn. This seems excessive since refreshBookmarks is a DB call.
  2. Attaching an onChange listener to a global object that triggers refreshBookmarks() when I add new bookmarks from elsewhere.

Are there other methods that I’m missing?

UPDATE

I’ve added an event listener on the Bookmarks page:

$on('pageMounted', (e, page) => {
      $f7.on('bookmarksUpdated', function () {
        refreshBookmarks();
      });
    });

And then in my add/delete bookmark function on other pages, I’m emitting the event

$f7.emit('bookmarksUpdated');

It’s working pretty well.

1 Like