Everytime I load my list of items I realized that the child_added event is called, but why? Wasn't this event supposed to be called only when a new child is added to the database?
From https://firebase.google.com/docs/database/admin/retrieve-data#child-added
child_added is triggered once for each existing child and then again every time a new child is added to the specified path.
To get around it, there are already several posts that answer that:
Firebase child_added only get child added
How to separate initial data load from incremental children with Firebase?
how to discard initial data in a Firebase DB
A child added listener will always be invoked for all existing children under a node when the listener is first added. Then as new children are added, the listener will continue to get invoked. This is the expected behavior. It allows your code to stay in sync with the entire contents of that node at all time.
If you want to listen to only children that are recently added, you will have to come up with a query that involves looking at a timestamp field in each child to figure out if it's of interest to your code.
Because (in my opinion) it is handy way of populating lists, you can use only add or delete events and stop using load as such.
Suppose you have list of something in ios or android. What you need is:
load it some time at the beginning - you can use add event, firebase will call it so many times as the number of items in node (list);
react on adding new items from another device - again, add event will be called and you will populate the new item into your list;
delete (same as add).
Related
The documentation mentions that I could use the remove function of the components to remove eventlisteners I have added. Do I need to this at all times? Or are events removed when the entity is removed?
I understand that I need to remove events I have added on other entities. But if the component adds a click event to its entity. Will that click event be removed when the entity is removed? Or can this cause a memory leak?
Cheers
Peter
Three cases to consider here:
If a DOM element (like A-Frame's <a-entity/>) is detached, and you don't store a reference to the element in a variable anywhere, then you don't need to unbind your event listeners — the listeners are cleaned up automatically.
If you're storing the element to re-attach it later, then you would want to remove listeners in remove() so that the next time init() runs, you don't start receiving duplicate events.
The final case, and probably the most important, is that if your component binds listeners to elements other than its own (the canvas, document, or body for example) then you definitely want to clean up your listeners so that your callbacks won't fire for a component that is no longer in the scene.
I am writing an application in Meteor with React. I am trying to achieve an infinite scroll feature.
What I am doing is subscribing to a publication with a limit which is tracked by my component's state. When the component detects that it has reached the bottom, it increments the limit in its state.
This triggers a re-render and a subscription to more data.
The issue I have is the whole component being re-rendered. It loses scroll position and takes you to the top.
How do I achieve infinite scroll with pub/sub based on the limit saved in state and only adding extra rows in the component instead of rendering the whole thing?
Subscribing to the whole list with no limits is not an option for me
So, I couldn't find a way to do it with pub/sub so I had to use Meteor.call, that does a mongo's skip() and limit() based on a page to fetch data from the database and then save that data in the component's state.
This way it does not re-render the entire thing but only adds nodes for the new data it receives.
This also means there is none of the automatic socket stuff happening, which is fine for my use case.
One benefit I do get is it's easy to know whether there is more data left in the database to fetch. Surprisingly tricky with pub/sub unless you add a package.
You have to store your data in some stack and enlarge it. React will render only new elements of your stack instead of re-rendering whole component.
My webapp allows its users to interact with items. These items can be put in the trash bin, and thus be removed from regular items. I have a dedicated sub-menu called "trash bin" where users can recycle or delete the items previously put in the trash bin.
I want to conditionally display the trash bin menu, only if there are items in the trash bin depending on the user rights.
However, I don't want to publish the items in the trash bin before the user goes to the trash bin sub-menu.
What I currently do is calling a method which returns a flag (is there or not items in the user trash bin?). But this is not reactive: if another user trash an item, the sub-menu will only appear once the page has been reloaded.
How can I publish a reactive boolean flag?
I considered using one cursor.Observe() per menu/user and notify the creation (via update) or deletion (via remove) of an item using a publication.changed() on a fake published collection with one item (with one boolean field) but it seems overkill considering the resources used for the task.
I also considered updating a dedicated field in every user profile when an item status change. Here again, this is too much operations for a simple feature: I would need to assess every user right for each operation involving an item status change, and each time a user rights change, re-assess his right to recycle every item.
The less consuming alternative would be to wrap my method call in the menu template.Autorun(). However, this is not a reactive solution since it triggers only when the menu is re-rendered.
Have you faced the same kind of issue? Do you have a possible alternative solution in mind (performance-wise)?
Create a new collection, ex: TrashBinState that contains a document with the (presumably shared) state of your trash bin
Update that document server-side whenever an item is trashed
Publish it
Have every client subscribe to that publication
I'm still working on my zoomable node-graph project. I'm currently having problems with what I know must be relatively easy, but have been unable to find a solution to:
I have numerous objects, many of them are stored within other objects (and overlap in physical space). As I zoom into an object, it begins to fade away. At the moment it begins to fade, I load in the child object (or create a child object if one doesn't exist). I want to turn off the parent object's ability to respond to most events. The exception is the scroll wheel, which needs to be sent to both objects simultaneously so that the parent can continue to fade out as I zoom farther in. Try as I might, I can't find a way to tell Flex "hey, for right now dispatch these types of events ONLY to this object." I either end up with event dispatch stack overflows from trying to manually redirect the events, or I get events that don't activate at the correct time or on the correct object. What can I do?
I want to turn off the parent object's
ability to respond to most events.
You can't turn off an objects ability to respond to events.
You can write code to remove all event listeners inside that object; although I suspect this will be a manual process.
You can remove that object from the display list so its event listeners won't trigger on events in their capture or bubbling phases. If this object has children that you want to display this won't work.
You may be able to work something out where the 'child' object calls stopPropogation() and/or stopImmediatePropogation() in it's own event listeners. I believe this could prevent the handlers from firing in the parent, but it may depend how your listeners are set up. I do not believe this will have an effect if you are listening in the capture phrase.
You may be able to write "aware" event handlers that basically say:
if(SomeConditionTrue){ return; }
I'm running out if ideas. But, I'm pretty sure there is no way to universally say "Don't let this component respond to events"
Can anyone think of a (preferably quick) way to move the data() attached to a DOM element to a new instance of itself?
The lightbox plugin I'm using deletes and re-appends and element to the page in order to display it in the lightbox (to aviod the multiple-ids issue that ASP.net has), and obviously the .data() that is attached to the element is lost when this happens.
There's a relatively new overload for .clone() you can use to do this.
.clone(true) will copy the element with events and data intact.
Alternatively, change your plugin to use .detach() rather than .remove() which keeps data intact. From the docs:
The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.