First you need to define your template in the JS file and pass variables from phtml.
In 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
}
});
})
and in 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>
If you have the information from backend block function , something like an array you can do as follows
<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>
And in 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
}
});
})
where keyName should be the array key from the block
UPDATE
You can do without window.... variables something like this:
return Component.extend({
initialize: function (config) {
var paramValue = config.parameter;
}
});
and in your PHTML:
<script type="text/x-magento-init">
{
"#some-element-id": {
"Namespace_Module/js/jsfilename": {"parameter":"value"}
}
}
</script>
