I am writing this Web application where I need to visualize filtered, sorted and paginated (on the server) collections through JavaScript (planning on using Isotope to present collections). These collections are dynamic, i.e. they start out with certain items, but their content may change throughout the application's lifetime. Could I implement this functionality by watching a collection on the server through Reactive Extensions for JavaScript? If so, how?
For this particular problem, let's say a collection is rendered in HTML as an element #container with a child element of class item for each collection item:
<div id="container">
<div class="item">Item 1</div>
<div class="item">Item 3</div>
</div>
If "Item 2" is then added to the collection and "Item 1" removed from it on the server, JavaScript should react by rendering the updated collection as follows to HTML:
<div id="container">
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
I've created an animated fiddle to demonstrate this sort of scenario. Imagine that the changes to the collection take place on the server, and that the JavaScript simply reacts to it.
I've found that Reactive Extensions may help in solving this problem, but it doesn't concern itself with communication between the server and client. A likely way to apply RX would be to establish a bridge between server and client, through which RX events could flow. SignalR stands out as a likely option for implementing the bridge. There even exists a project, SignalR.Reactive, which combines SignalR and RX in this way.
The real problem in solving my problem, I think, will be how to publish changes on the server. I've found out that RavenDB, which is my database of choice, has an API for observing changes to data, so hopefully I'll be able to design a scheme around this. Once this is solved, I envision the publishing of changes to clients being fairly trivial with the help of RX and SignalR.