Questions about using knockout

Question

I would like add a feature to show a data like the "Welcome username". So i searched about how it works and i followed this tutorial

I'm blocked because i'm always getting the error unable to process binding company()

I created a model which represent a company, in my class extending SectionSourceInterface in the getSectionData method i return ['name' => 'test'] to test the feature.

I put this in my frontend/di.xml :

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">    
    <type name="Magento\Customer\CustomerData\SectionPoolInterface">
        <arguments>
            <argument name="sectionSourceMap" xsi:type="array">
                <item name="company" xsi:type="string">Test\Company\CustomerData\Company</item>
            </argument>
        </arguments>
    </type>
</config>

I add this my default.xml module layout :

<referenceContainer name="header.panel">
    <block class="Magento\Framework\View\Element\Template" name="welcome_msg" before="-" template="Test_Company::html/welcome.phtml"/>
</referenceContainer>

I put this in my welcome.phtml :

<?php
/**
 * @var \Magento\Framework\View\Element\Template $block
 */
?>
<p>Hello</p>
<!-- ko if: company().name  -->
    <li class="greet welcome" data-bind="scope: 'company'">
        <span data-bind="text: new String('<?=$block->escapeHtml(__('Welcome, %1!', '%1'))?>').replace('%1', company().name)"></span>
    </li>
<!-- /ko -->
<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "company": {
                    "component": "Test_Company/js/view/company"
                }
            }
        }
    }
}
</script>

and i put this in my company.js :

define([
    'uiComponent',
    'Magento_Customer/js/customer-data'
], function (Component, customerData) {
    'use strict';

    return Component.extend({
        /** @inheritdoc */
        initialize: function () {
            this._super();

            this.company = customerData.get('company');
        }
    });
});

Could you help me please to know what's wrong in my process ?

Answer 1

Calling company() outside the scope

You are currently calling <!-- ko if: company().name --> outside the scope binding. Try changing it to this:

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

Another alternative would be to move the scope binding higher up in the DOM, on the UL maybe.

Possible issue with the property

It could also be because company is not a Knockout observable, I've not worked on Magento 2 for few months so take this with a pinch of salt.

1. Add Knockout as a dependency of your JS
2. Initialise this.company as a KO observable

That would look like this:

define([
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'ko'
], function (Component, customerData, ko) {
    'use strict';

    return Component.extend({
        /** @inheritdoc */
        initialize: function () {
            this._super();

            this.company = ko.observable(customerData.get('company'));
        }
    });
});