From the QuickStart template, the "optionChange" event is placed in HTML, and the callback funtion is placed in js file.
Like this(header.html, header.js):
HTML:
<div role="navigation" data-bind="ojComponent: {component: 'ojNavigationList',
optionChange: $parent.navChange,navigationLevel: 'application',
item: {template: 'navTemplate'}, data: $parent.navDataSource,
selection: $parent.router.stateId(), edge: 'top'}"
class="oj-web-applayout-navbar oj-sm-only-hide oj-web-applayout-max-width oj-navigationlist-item-dividers oj-md-condense oj-md-justify-content-center oj-lg-justify-content-flex-end">
</div>
Javascript:
self.navChange = function(event, ui) {
if (ui.option === 'selection' && ui.value !== self.router.stateId()) {
// Only toggle navigation drawer when it's shown on small screens
if (self.smScreen())
self.toggleDrawer();
self.router.go(ui.value);
}
};
But now, we hope to bind the event listener to the ojoptionchange event with js code,( used as JSDoc: Class: ojNavigationList )
HTML:
<div id="test1" role="navigation" data-bind="ojComponent: {component: 'ojNavigationList',
navigationLevel: 'application',
item: {template: 'navTemplate'}, data: $parent.navDataSource,
selection: $parent.router.stateId(), edge: 'top'}"
class="oj-web-applayout-navbar oj-sm-only-hide oj-web-applayout-max-width oj-navigationlist-item-dividers oj-md-condense oj-md-justify-content-center oj-lg-justify-content-flex-end">
</div>
Javascript:
$("#test1").on({
'ojoptionchange': function (event, ui) {
alert("ojoptionchange change");
$parent.navChange(event,ui);
}
});
Run the index.html, the navigationlist disappear.
Console $("#test1"), shows the correct object, but the event fail to bind and the component disappear.
As we can not change the html originally, we hope to listen to ojoptionchange event with extension that implemented with javascript.
The code is attached.
Thanks.