Magento 2 bind ko scope to a non-html/virtual element

Question

I want to bind customer scope to a non-html element as I do not want html to be loaded if customer is not logged in. In the OOTB magento inside vendor/magento/module-theme/view/frontend/templates/html/header.phtml li tag is loaded even if customer is not logged in. Visually the li is hidden in this case but the accessibility screen reader reads it.

I want to bind a scope to a non-html element so that I can write a condition something like below.

<!-- ko scope: customer -->
 <!-- ko if: customer().fullname -->
 <li class="greet welcome">
 <span class="logged-in"
 data-bind="text: new String('<?= $block->escapeHtml(__('Welcome, %1!', '%1')) ?>').replace('%1', customer().fullname)">
 </span>
 </li> 
 <!-- /ko -->
 <!-- /ko -->

But scope is not bound.

knockout.js:3381 Uncaught ReferenceError: Unable to process binding "if: function(){return customer().firstname }"
Message: customer is not defined.

Any other way to achieve this?

Answer 1

For scope you should use a String. Try:

<!-- ko scope: 'customer' -->

• Sejal Shah: That did the trick! Thank you so much @JanuszJanczy :)
• Meberem: Thanks for this, do you happen to have a link to the knockout/magento documentation for this? I have been googling for a while and I can't find anything but this question and answer