https://netsuiteprofessionals.com logo
Join Slack
Powered by
Converted an extension from using backbone router ...
# suitecommerce
c
Converted an extension from using backbone router to PageType. Couple questions.. 1. The PageTypeBaseView - Do you need to use beforeShowContent to render childviews? 2. Will adding a child in beforeShowContent cause the CMS area in a child template not to load? I ask because I am getting the following error. 
jQuery.Deferred exception: a is undefined _CmsViewPromises/<@https://mycustomwebsite.website.com/scs/javascript/shopping.js?t=1612980274111:1:649534
s
1. Yes. Honestly, most things need to be in 
beforeShowContent
when using the PageTypeBaseView class 2. The CMS is usually the last thing to load, so probably not. You would need to look at the code it's pointing to figure out exactly what's going wrong
c
I have commented out the childview added via the 
beforeShowContent
and I am still getting the error.
Copy code
return {
		mountToApp: function (container) {

			var PageType = container.getComponent('PageType'),
				environment = container.getComponent('Environment');

			PageType.registerPageType({
				name: 'pro_program_application',
				routes: ['pro-program'],
				view: ProProgramApplicationView,
				options: {
					container: container,
					environment: environment
				},
				defaultTemplate: {
					name: 'pro_program_application.tpl',
					displayName: 'Pro Program Application'
				}
			});

		}
	};
Copy code
return PageTypeBaseView.PageTypeBaseView.extend({

		template: program_application_tpl,

		initialize: function initialize(options) {

			this.model = new ApplicationModel();
		},

		beforeShowContent: function beforeShowContent() {

			// breadcrumbs - hide
			this.getBreadcrumbPages = '';

			// page title
			this.title = Utils.translate('Ralph Brothers Pro Program');

			// add child view
			// this.childViews = {
			// 	'ProProgramApplication.Form.View': function () {
			// 		return new ProProgramApplicationFormView({
			// 			container: this.options.application,
			// 			environment: this.options.environment,
			// 			model: this.model
			// 		});
			// 	}
			// };

		}

	});
s
Your 
beforeShowContent()
needs to return a promise object
c
thanks
s
If you're not doing any AJAXing in this method, then you can just return a resolved promise
c
Is my 
this.getBreadcrumbPages
correct? We do not need to display breadcrumbs.
s
Just don't include it in your code
c
Updated, however the error is still there, even if I comment out the childview.
Copy code
return PageTypeBaseView.PageTypeBaseView.extend({

		template: pro_program_application_tpl,

		initialize: function initialize(options) {

			this.model = new ProProgramApplicationModel();
		},

		beforeShowContent: function () {

			promise = JQuery.Deferred();

			// page title
			this.title = Utils.translate('Ralph Brothers Pro Program');

			// add child view
			this.childViews = {
				'ProProgramApplication.Form.View': function () {
					return new ProProgramApplicationFormView({
						container: this.options.application,
						environment: this.options.environment,
						model: this.model
					});
				}
			};
			promise.resolve();

			return promise;
		}

	});
s
Copy code
// Your code
promise = JQuery.Deferred();

// Should probably be
var promise = new jQuery.Deferred();
Or you can just do
Copy code
return new jQuery.Deferred().resolve();
(You're misspelling jQuery.)
c
That did it! Assuming the 
Example.UserPreferences.List.View.js
did not include the jQuery.Deferred() because of the collection fetch, which I believe returns a promise.resolve()?
Copy code
beforeShowContent: function beforeShowContent() {
            this.getBreadcrumbPages = function () {
                return [{
                    text: Utils.translate('User Preferences'),
                    href: '/preferences'
                }];
            };

            this.title = Utils.translate('User Preferences');

            this.childViews = {
                'Example.UserPreferences.Collection.View': function () {
                    return new ExampleUserPreferencesCollectionView({
                        collection: this.collection
                    });
                }
            };

            return this.collection.fetch();
        }
s
beforeShowContent is basically a hook. You're saying "before you render this view, you need to wait for this promise to resolve". In my example, I am using that to perform a GET via AJAX. GETs via AJAX via jQuery always return a promise object. When that promise object finally changes state to resolved, it will trigger the rendering of the view.
đź‘Ť 1
c
I had mentioned not showing breadcrumbs… Without 
this.getBreadcrumbPages = ''
in the beforeShowContent, the breadcrumb view displays with “home”.
10 Views
Open in Slack
PreviousNext
Powered by