How to beep when new objects appear, or: Is there any way to know what caused the update inside a _uihooks({insertElement:...}) function?


I have an app which sits open displaying an object list for long times (hours). Every now and then a new object is added to the collection, and thus the list.

I would like to add a little sound effect when this happends.

So, I can attach _uihooks to the wrapper of the {{#each … }}.
(Which is driven by a Collection.find() inside a helper as usual).
So when Blaze adds nodes to the DOM I get insertElement() calls where I can for example trigger a sound.

That’s fine, but my problem is I do not want to do the sound effect when the user causes the list to change (for example on initial rendering, or when the parameters that control the list selections are changed). I only want to do it when there is a reactive update due to a database change.

And I can’t figure how to tell these two cases apart inside the insertElement function…??


Collection.oberveChanges is probably what you want. You’ll need to customize it to behave how you want, but it gives you the hooks to do what you want to do.


From the docs:

Before observeChanges returns, added (or addedBefore) will be called
zero or more times to deliver the initial results of the query.

…so the same question will apply here: How do I know in the .added() callback if the added object comes from the initial results or from a reactive update at a later point?

I can of course hack this, like using timestamps and global variables or so, just as I could when using _uihooks insertelement method, but I am looking for something less ugly…