Pass multiple collections to a template · Issue #53 · rendrjs/rendr (original) (raw)

That's one place. There are a few other important parts. Let's walk through the process:

• When rendering a view on the server, the viewEngine calls getBootstrappedData in order to summarize the models/collections passed as locals to the view for serializing into JSON and bootstrapping on the page. (code)
• This calls Fetcher.prototype.summarize, to turn model/collection instances into metadata suitable for storing as JSON. (code)
• In the layout in your app, you call App.bootstrapData(...) to load that serialized JSON into memory. (code)
• In turn, this calls Fetcher.prototype.bootstrapData, which turns the JSON into models/collections for storing into the modelStore and collectionStore. (code)
• When a view is created on the client-side, BaseView.prototype.hydrate is called to take the options passed in from i.e. data-model_name, data-model_id and ask the Fetcher for model/collection instances. (code)
• This calls Fetcher.prototype.hydrate, which uses the metadata to return model/collection instances from modelStore/collectionStore. (code)

What I'd like is that any JSON-serializable data could be bootstrapped and attached to a view during hydration, rather than just models or collections. This could be accomplished by assigning a unique identifier to views on the server, and then using that id as a key in order to store the data for that view in a dictionary.

It may be possible to reuse the View.prototype.cid unique ID that Backbone adds to views, however the issue is that it gets regenerated on the client-side, and gets out of sync with the server. We could either override the constructor in View to use a cid that was passed into this.options (coming from a data-cid attribute in the HTML), or just use our own identifier.

The reason I didn't go down this road in the first place is because of duplicate data being bootstrapped for subviews. Take m.airbnb.com as an example; if you view the source, you'll notice there's a search_view which has a reference to a listings collection (identified by the JSON params {"location":"","number_of_guests":1,"offset":0,"items_per_page":20}). That is the outer view, but it has a number of child views which share a reference to the same collection. What I wouldn't want to happen is to duplicate that bootstrapped JSON onto the page once for each view; that can add up!

Maybe there's a library that can de-dupe JSON into some other, more compact format? If not, this would be a pretty juicy problem to tackle!

Another approach could be to keep bootstrapping data as models or collections, but allow multiple models or collections. Then it's really just BaseView that needs to change, rather than all the bootstrapping code.