Multiple knockout uiComponents should not share the same data / seperate view instances

Question

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.

Answer 1

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.

Update 2022:

Values defined inside default: are being shared between component instances.

Values defined inside initialize() method are scoped

define(['uiComponent','jquery', 'ko', 'mage/translate'],
    function (Component, $, ko, $t) {
        'use strict';

        return Component.extend({
            defaults: {
                template: 'Example_Upload/configuration-check'
            },

            initialize: function (config) {
                this._super();

                this.configCheck = ''; // scoped
            },
        });
    });

Answer 2

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

Answer 3

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

Could you help me?