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

knockoutjsmagento2uicomponent

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.

Best Answer

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.

Related Topic