6

enter image description here

It seems to me that text/x-magento-init returns options async:

<script type="text/x-magento-init">
    {
        "*": {
                "component": " <?php echo "test" ?> "

        }
    }
</script>

component.js

define([
    'jquery',
    'jquery/ui'
], function ($) {
    'use strict';  

return {
    check : "3",        
    myVariable : "7",
    component: function(config, element) { 
        console.log(config) //OUTPUTS OK AFTER 3 SECONDS
        this.myVariable = config // replaces it with undefined when called in third.js       
    }
};

then in third.js where all info should be processed:

require([
        'jquery',        
        'component',
        'jquery/ui'
    ],
    function($,component){    

        $(document).ready(function(){
            component.component();
            console.log(component.myVariable) //undefined
            console.log(component.check)  //3

the right info is printed from component.js after being undefined.

also component.js is loaded by requirejs, in the sense that console.log(component.check) returns 3 as desired.

How to wait until config is loaded?

enter image description here

Question related to How to get url for static image file in Magento2 javascript files? but has progressed

  • What is the reason for having 2 separate JS files? Why not pass the data directly to third.js? – Aaron Allen Jul 9 '16 at 20:56
  • @AaronAllen because it is a js intensive module and I don't want a file with thousands of lines so I am trying to break it up (that would be one of the advantages for using amd in the first place). Although I am curious how would you pass it directly to third.js when here it says devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/… it is available only on return or as a widget – Claudiu Creanga Jul 9 '16 at 21:02
  • You can use $(document).ajaxComplete(function(){alert('hello') }); @ClaudiuCreanga – Keyur Shah Jul 15 '16 at 5:59
  • Okay, I will wait for your response. But I think It will help you at somepoint. @ClaudiuCreanga – Keyur Shah Jul 15 '16 at 10:04
4
+50

I think the problem with what your trying to do is that a property defined dynamically within component.js will not be accessible from third.js.

As an alternative solution, you can pass whatever variables are needed directly to your 'third.js' file. You could use 'component.js' as a library of functions rather than as a middle man for passing data from the view.

In the template:

<script type="text/x-magento-init">
    {
        "*": {
            "third": {
                "var1" : "hello"
            }
        }
    }
</script>

third.js is defined like this:

define([
    'component'
], function (component) {
    'use strict';

    return function (config) {
        console.log(config); // will output the config object {var1: "hello"}
        component.foo(config.var1); // call function from component.js on data
    }
});

and component.js looks like this:

define([], function() {
    'use strict';
    return {
        foo: function (bar) {
            console.log(bar);
        }
    };
});
  • thanks, I don't like how it looks, but it is the only solution from what I see. – Claudiu Creanga Jul 13 '16 at 9:46
0

Using (window).load instead of (document).ready loaded our scripts perfectly fine when initiating a slider, for example.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.