Render Specific Child Views from the Parent View

In SuiteCommerce, when a Backbone view renders, all child views of that view are completely rebuilt. New instances of the child views are created. This is usually fine, but there can be cases where re-rendering a specific child view without destroying and creating a new Backbone view object is desired. For example, if data would be lost or rendering speed is a concern.

Code Example: Render Specific Child Views from Parent View

Re-rendering a specific child view is actually quite easy once you know the function exists.

define("Parent.View", [ "parent_view.tpl", "Backbone", "Child.View", ], function ( parent_view_tpl, Backbone, ChildView, ) { "use strict"; return Backbone.View.extend({ template: parent_view_tpl, events: { 'click [data-action="some-listerer"]': "handleEvent", }, //use the "renderChild" function to trigger a re-rending on an existing child view handleEvent: function () { this.renderChild("MyChild.View"); }, //define your child view normally. childViews: { "MyChild.View": function () { return new ChildView(); }, }, }); });

About This Code to Re-render the "MyChild.View"

The above code will re-render the “MyChild.View” child view when a user clicks an element with the attribute “data-action="some-listerer". Any event is possible, the important thing is the “renderChild" function, which calls render on the child view but not the parent, and not other child views. A common use case would be the re-rendering of specific columns in a table.

Got stuck on a step in this article?

We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so that we can update this article!

Oracle NetSuite Alliance Partner & Commerce Partner

If you have general questions about SuiteCommerce or more specific questions about how our team can support your business as you implement NetSuite or SuiteCommerce, feel free to contact us anytime. Anchor Group is a certified Oracle NetSuite Alliance Partner and Commerce Partner equipped to handle all kinds of NetSuite and SuiteCommerce projects, large or small!

Tagged with Training