7

I am initializing the same uiElement multiple times on the same page (on checkout_cart_index / one per cart item)

        <div class="configuration-check" data-mage-init=
        '
                { "Magento_Ui/js/core/app":
                    {"components":
                        { "configurationCheck" :
                            {
                                "component": "configurationCheck",
                                "template" : "Example_Upload/configuration-check",
                                "config" : <?php echo $itemInfo->asJson() ?>
                            }
                        }
                     }
                  }
            '
             data-bind="scope:'configurationCheck'"
        >
            <!-- ko template: getTemplate() --><!-- /ko -->
        </div>

configuration-check.js looks like this:

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

    return Component.extend({
        defaults: {
            template: 'Example_Upload/configuration-check'
        },
        /** @inheritdoc */
        initialize: function () {
            this._super();
            return this;
        },

        getInfo: function (field) {
            return this[field];
        }
    });
});

In the template I use getInfo() to get the config data which was given in the initialization.

Now the effect is, that both cart items show the same data, even they are different.

Can this easily be fixed or am I doing a completely wrong approach?

EDIT: I found how to create multiple instances of a view - but how can this be done during Magento's initialization of the components?

EDIT2: I think I need a different component name for each instance. Maybe it can work with a different name or namespace setting in the JSON passed to data-mage-init - but I did not yet find the right combination to make it work.

4

Just after putting the bounty I found the answer myself:

Multiple instances are created, when the key below the "components" structure has a unique ID. The same shall be used in the data-bind attribute:

$htmlId = $block->getJsId() // returns a unique ID

        <div class="configuration-check" data-mage-init=
        '
                { "Magento_Ui/js/core/app":
                    {
                    "components":
                        { "configurationCheck-<?php echo $htmlId ?>" :
                            {
                                "component": "configurationCheck",
                                "template" : "Example_Upload/configuration-check",
                                "config" : <?php echo $itemInfo->asJson() ?>
                            }
                        }
                     }
                  }
            '
             data-bind="scope:'configurationCheck-<?php echo $htmlId ?>'"
        >
            <!-- ko template: getTemplate() --><!-- /ko -->
        </div>

That's it ... so simple.

1
  • 3
    This is not working for me, after changing with unique ID still loading same data for all the items. doing exactly same as you have suggested. Jun 25 '18 at 10:58
0

I could not find a solution for this. I tried with different component name but it did not work.

Could you help me?

0

I solved this problem without HTML template (using phtml only), but your can adapt to work with HTML template too.

First, declare an unique name to section and pass a unique id to the component (can be the same id):

<script type="text/x-magento-init">
{
    "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "section-<?php echo $block->getJsId(); ?>": {
                        "component": "Vendor_ModuleName/js/sampleModule",
                        "jsId": "<?php echo $block->getJsId(); ?>"
                    }
                }
            }
    }
}
</script>

Now at your component in the initialize function, you will declare your observable variable with a dynamic name using eval:

...

initialize: function() {
  this._super();
  eval('this.someVarName' + this.jsId + ' = ' + ' ko.observable({}) ' + ';')

...

It will create an observable variable with a name like someVarName-blockName-0, after you can apply data to the dynamic variable:

...

  let var1 = { sample: 'test' }
  eval('this.someVarName' + this.jsId + ' ( ' + ' var1 ' + ' ) ' + ';')

...

Finally, on your phtml you can bind the data:

<!-- ko scope: 'section-<?php echo $block->getJsId(); ?>' -->
  <!-- ko if: someVarName<?php echo $block->getJsId(); ?>() -->
    <p data-bind="text:someVarName<?php echo $block->getJsId(); ?>().sample"></p>
  <!-- /ko -->
<!-- /ko -->

It will bind the variable someVarName-blockName-0().sample

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.