Question

I have two JSON objects with the same structure that I want to visualize on my html page side-by-side. Since I’m building a comparison of sorts, I want data elements that match to be viewed on the same line. Left-only or right-only data elements need to be shown with blanks next to them in the opposite column.

I’m trying to do this with JsRender/JsViews, but it is difficult to handle multiple data sources at once. Or doing each side as a separate template, each side doesn’t know where to load data since it would need to know if the opposite existed.

I’m up for using any other mechanism as long as it works.

Thanks,
Greg

Answer 1

You can pass in additional data objects to JsRender templates, via the contextual helpers, either by passing in as context on the render call:

render(dataOne, {data2: dataTwo})

or by registering as helpers:

$.views.helpers({
    data2: dataTwo
})

Either way, you can then access the helper object as ~data2, for example by writing {{:~data2.prop}} or {{for ~data2}}...{{/for}}.

Of course, dataOne or dataTwo can be either objects or arrays.