Magento 2: Передать аргумент/переменную в компоненте js

Я использую Magento2.2. Я хочу передать переменную в компоненте JS из файла phtml на интерфейсе, но не знаю как? Я использую следующий код 

<div id="product-custom-info" data-bind="scope: 'custom-scope'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script type="text/x-magento-init">
    {
      "#product-custom-info": {
            "Magento_Ui/js/core/app": {
            "components":{
              "custom-scope":{
                "component":"Namespace_Modulename/js/customjs"
              }
            }
          }
      }
    }
    </script>

</div>

Namespace/Modulename/view/frontend/template/web/js/customjs.js

define([
'jquery',
'ko',
'uiComponent',
'domReady!',
], function ($, ko, component) {
    'use strict';
    return component.extend(function(config){      
      console.log(config);
      });
})

Пожалуйста, помогите мне решить эту проблему. Любая помощь будет признательна.

Заранее благодарю.

Author: zed Blackbeard, 2018-03-15
Source

2 answers

Сначала вам нужно определить свой шаблон в файле JS и передать переменные из phtml.

В js:

define([
    'jquery',
    'ko',
    'uiComponent',
    'domReady!',
], function ($, ko, component) {
    'use strict';
    return component.extend({
        defaults: {
            template: 'Vendor_Module/template'
        },
        productInfo: window.customInfo

        initialize: function () {
            //init function code here
        }
    });
})

И в PHTML:

<div id="product-custom-info" data-bind="scope: 'custom-scope'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script>
        window.customInfo = 'variable';
    </script>
    <script type="text/x-magento-init">
    {
      "#product-custom-info": {
            "Magento_Ui/js/core/app": {
            "components":{
              "custom-scope":{
                "component":"Namespace_Modulename/js/customjs"
              }
            }
          }
      }
    }
    </script>

</div>

Если у вас есть информация из функции внутреннего блока, что-то вроде массива, вы можете сделать следующим образом 

<div id="product-custom-info" data-bind="scope: 'custom-scope'">
    <!-- ko template: getTemplate() --><!-- /ko -->
    <script>
        window.configs = <?php /* @escapeNotVerified */ echo \Zend_Json::encode($block->getConfig()); ?>;
    </script>
    <script type="text/x-magento-init">
    {
      "#product-custom-info": {
            "Magento_Ui/js/core/app": {
            "components":{
              "custom-scope":{
                "component":"Namespace_Modulename/js/customjs"
              }
            }
          }
      }
    }
    </script>
</div>

И в JS 

define([
    'jquery',
    'ko',
    'uiComponent',
    'domReady!',
], function ($, ko, component) {
    'use strict';
    return component.extend({
        defaults: {
            template: 'Vendor_Module/template'
        },
        productInfo: window.customInfo.**keyName**

        initialize: function () {
            //init function code here
        }
    });
})

Где Имя ключа должно быть ключом массива из блока

ОБНОВЛЕНИЕ Вы можете обойтись без window.... переменных примерно так:

return Component.extend({

        initialize: function (config) {
            var paramValue = config.parameter;
        }
    });

И в вашем PHTML:

<script type="text/x-magento-init">
{
    "#some-element-id": {
        "Namespace_Module/js/jsfilename": {"parameter":"value"} 
    } 
} 
</script>
 4
Author: Vlad Patru, 2018-03-16 08:04:56

Нижеприведенное работает для меня как удовольствие:

<div id="product-custom-info" data-bind="scope: 'custom-scope'">
<!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
{
  "#product-custom-info": {
        "Magento_Ui/js/core/app": {
        "components":{
          "custom-scope":{
            "component":"Namespace_Modulename/js/customjs",
            "myVar" : "My Value"
          }
        }
      }
  }
}
</script>

Затем в customjs:

define([
    'jquery',
    'ko',
    'uiComponent',
    'domReady!',
], function ($, ko, component) {
        'use strict';
        return component.extend({
        defaults: {
            template: 'Vendor_Module/template'
        },

        initialize: function (config) {
            console.log(config.myVar) //logs My Value
        }
    });
});
 7
Author: Juliano Vargas, 2019-12-09 06:57:07