Once code-first JSS solution is deployed to a running sitecore instance, we can see rendering items created under Rendering folder in Sitecore content tree.

But, Only Component Name field is populated with name of that component.

How the binding works with physical files for JSS renderings ( /sitecore/templates/JavaScriptServices/Json Rendering) ?

up vote 4 down vote accepted

The binding is done via JavaScript, during rendering.

When a JSS site loads, it gets the current route's layout data. In integrated mode, this comes by a JS object delivered directly to the renderView() method (server-side rendering), and in connected mode or during route change, the data is delivered by a HTTP call to the Layout Service.

This data contains the name of the components that you see in the rendering item as part of the layout:

layout service output

Then the Component Factory (part of the JSS app) maps those component names into a JS component implementation (this example is React; each library does it differently):

import IntegratedPage from '../app/components/IntegratedPage';

const components = new Map();
components.set('IntegratedPage', IntegratedPage);

const componentFactory = (componentName) => components.get(componentName);

export default componentFactory;

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.