Make a View Available Anywhere in Your Templates
The registerView() method allows you to register a view to a component, making the view available anywhere that component is available. This functionality makes it easier to use simple views in any template in your theme. You should not use the registerView() method for every view, but instead use it:
-
For views that are self contained and do not rely on context or model data.
-
With designers in mind so that after you create a view, a designer is free to use it in any template they need.
The registerView() method is used in SuiteCommerce and SuiteCommerce Advanced (SCA) to allow the site search elements, the search button, and the keyword input box, to be used in more than one template. This is implemented in the source code for SCA, for example, by using registerView() to register the views for the site search elements with the layout component. Because the layout component is available globally, you can include the site search elements in your templates by adding data-view="SiteSearch" and data-view="SiteSearch.Button" where you want those elements to appear. This is one example of the flexibility that the registerView() method provides. If you want to learn more about the search elements, see Customize Site Search Elements.
How to Use registerView()
You can add simple views using an entry point file in an extension. For example, if you want a "Hello World!" message to be available anywhere, include the following code in your entry point file:
define('HelloWorld'
, [
'HelloWorld.View.js'
]
, function
(
HelloWorldView
)
{
'use strict';
return {
mountToApp: function mountToApp (container)
{
var Layout = container.getComponent('Layout');
if (Layout)
{
Layout.registerView('HelloWorld', function HelloWorld ()
{
return new HelloWorldView
});
}
}
}
})
Create a view that includes the following code:
define('HelloWorld.View'
, [
'helloworld.tpl'
]
, function
(
helloworld_tpl
)
{
'use strict'
return Backbone.View.extend({
template: helloworld_tpl
})
});
Create a template that contains the following HTML:
<p>Hello World!<p>
Now you can edit any template to include the message:
<div data-view="HelloWorld"></div>
If you want to add some complexity, you can pass options in the constructor, such as the container object.
Why Use registerView() Instead of addChildView()?
The main benefit of the registerView() method is that it lets you separate the JavaScript for your Commerce website from your site's templates.
For example, if a developer creates a widget using addChildView() and writes the widget so that it renders on the home page, a designer can add the new widget to a home page template so that it is displayed on that page.
At a later date, if the business decides the widget needs to move to a different location, the developer must change the JavaScript so that it renders elsewhere and the designer must update the theme. And, both the JavaScript and the theme must be uploaded and activated again. However, if the developer uses registerView() instead, the designer is the only person who must make a change to use the widget in a different location.
For developers who make their SuiteCommerce extensions available to external customers, the registerView() method allows you to ship extensions that are flexible. Your customers are not limited to using the functionality provided by your extension in specific places that you define. Plus, your customers do not need to make updates to their JavaScript files to use the functionality. Instead, all your customers need to do is update their theme's templates.
The registerView() method is not a replacement for addChildView(), but it does complement addChildView() by providing more flexibility. You should use the two methods as follows:
-
addChildView()— You know exactly where this child view should go and it is unlikely to move because it is, for example, context-specific. -
registerView()— This view could be used in several places and it is generic enough to work almost anywhere.
Can I Use Model Data with registerView()?
What if you use a service to retrieve data from NetSuite and you want to include that data in a view that is available globally? Will this approach work? This approach will work only if that service has been called at the time the view is rendered.
Typically, you use the registerView() method in an entry point file. Entry point files are called when the modules are fist loaded. Models, however, are typically created only when a particular route has been taken, for example, when a shopper visits a specific page. So, if a user accesses that page and at the point of creating the model, you register the view, then you can pass the data along.
It is possible to delay the rendering of a view by performing the fetch in the view file and then only triggering showContent() when its promise resolves. This approach would work, too.
Keep in mind that although these approaches will work, they do not fall within the use cases the registerView() method was originally designed to support.