Magento 2.4.3 Page Builder – Fixing Knockout Master.html Rendering Issues

knockoutjsmagento2.4.3page-builder

In my master.html for a custom pagebuilder component, the "data" binding is not available. I always get an error that it's undefined in frontend.
But it's working fine in preview.html

preview.html (this is working)

<div class="pagebuilder-content-type pagebuilder-ls-teaser" event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false" attr="data.main.attributes">

    <div if="data.headline.html" class="teaser-headline" html="data.headline.html" />
    <div ifnot="data.headline.html" class="teaser-headline placeholder">Optional Headline</div>

    <render args="getOptions().template" />
</div>

master.html (not working)

<div attr="data.main.attributes" ko-style="data.main.style" css="data.main.css" class="bypass-html-filter">
    <div if="data.headline.html" html="data.headline.html" class="teaser-headline" attr="data.headline.attributes" />
</div>

And here the resulting HTML like it is stored in database cms_page

<div data-content-type="row" data-appearance="contained" data-element="main">
   <div data-enable-parallax="0" data-parallax-speed="0.5" data-background-images="{}" data-background-type="image" data-video-loop="true" data-video-play-only-visible="true" data-video-lazy-load="true" data-video-fallback-src="" data-element="inner" data-pb-style="NBUD75V">
      <div data-content-type="ls_teaser" data-appearance="default" data-element="main">
         <!-- ko if: data.headline.html -->
         <div class="teaser-headline" data-element="headline">test headline</div>
         <!-- /ko -->
      </div>
   </div>
</div>

Now, loading the page in frontend, I get following Error in debug console:

Uncaught ReferenceError: Unable to process binding "if: function(){return data.headline.html }"
Message: data is not defined

I know that data is not available in Frontend and therefore resulting in that error, as it's just in backend. And the backend should render the resulting html.
But why is the actual knockout condition <!-- ko if: data.headline.html --> ending up in the html in database? Are there any configs or additional JS files needed for that?

Best Answer

In master.html I had class="bypass-html-filter" in the root <div> element.

This class tells Magento2 to not do anything to the html when you save the page. So it's not fixing any missing closing tags, and especially!! doesn't filter out any knockout.

Removing this class "fixes" the behaviour and the html frontend will be saved in database without containing any knockout.

Related Topic