How to pass a Magento 2 variable to KnockoutJS

Question

I want to pass $vendor_city to knockoutJS:

<?php
    $vendor_city = $vendor->getData('city');
?>

<div id="m2-component" data-bind="scope:'ko'">
<script type="text/x-magento-init">
    {
        "#m2-component": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "ko": {
                        "component": "some_mdl/js/estimate",
                        "template" : "some_mdl/estimate"
                    } // How do I pass a variable here to estimate.js?
                }
            }
        }
    }
    </script>
</div>

estimate.js

define(['uiComponent', 'ko', 'jquery'], function (Component, ko, jquery) {

    return Component.extend({
        initialize: function (config) {
            var self = this;
            this._super();

            // I want get that variable here

        },
});

---

I already done like this:

<script>
    window.sellerlocation= '<?=$vendor_city;?>';
</script>

But I want to pass a PHP variable to KnockoutJS via a KnockoutJS component initialize, not a JavaScript window object.

Answer 1

Try the below code:

<?php
    $vendor_city = $vendor->getData('city');
?>

<div id="m2-component" data-bind="scope:'ko'">
<script type="text/x-magento-init">
    {
        "#m2-component": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "ko": {
                        "component": "some_mdl/js/estimate",
                        "template" : "some_mdl/estimate",
                        "vendorCity": <?= /* @escapeNotVerified */ $vendor_city ?>
                    }
                }
            }
        }
    }
    </script>
</div>

estimate.js

define(['uiComponent', 'ko', 'jquery'], function (Component, ko, jquery) {

    return Component.extend({
        initialize: function (config) {
            var self = this;
            this._super();
            console.log(config.vendorCity);
        },
});

Make sure that $vendor_city data is in encode format.

Refresh your JavaScript code, clean the cache, and check the output in the console.