I want to extend the functionality of a knockout component. I have added the config to the xml file in question:
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
...
<item name="example">
... other properties of the component
<item name="config" xsi:type="array">
<item name="SomeConfigVariable" xsi:type="string">true</item>
</item>
</item>
...
</item>
</argument>
</arguments>
I have included the mixin using my modules requirejs-config.js
, I can see it hit a breakpoint in my browser.
var config = {
config: {
mixins: {
"Magento_MODULE/js/view/example": {
"VENDOR_MODULE/js/view/example-mixin": true,
}
},
},
};
However I can't seem to find the code necessary to get my config data, I have tried this:
define(["ko"], function (ko) {
var mixin = {
imports: {
someConfigVariable: "${ $.SomeConfigVariable }", // Doesn't seem to do anything
},
initialize: function () {
this.someConfigVariable = false; // Default value
this._super();
return this;
},
};
return function (target, config) { // config is undefined
return target.extend(mixin);
};
});
What am I missing?
CodePudding user response:
The mixin code is not strictly neceesary. Setting it as a default like so:
define(["ko"], function (ko) {
var mixin = {
defaults: {
someConfigVariable: false,
},
initialize: function () {
this._super();
return this;
},
};
return function (target) {
return target.extend(mixin);
};
});
and updating the layout xml to look like so:
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
...
<item name="example">
... other properties of the component
<item name="config" xsi:type="array">
<item name="SomeConfigVariable" xsi:type="boolean">true</item> <!-- Note the xsi:type as boolean -->
</item>
</item>
...
</item>
</argument>
</arguments>
Gets me the desired result when running the component. Magento does some magic with the config
element before hitting the initConfig
method.