1

Want to pass entityId to the getInfo method: This block.phtml is on the catalog page (list) that gets called per Item on the page and sends each entity id to the getInfo method. The getInfo method then calls a controller that returns the info. If I add entityId to the initialize method only the first / last value gets passed to the getInfo method...

block.phtml

<script type="text/x-magento-init">
    {
        "#custom-component": {
            "Magento_Ui/js/core/app": {
               "components": {
                    "customcomponent": {
                        "component": "ACME_KnockoutDemo/js/custom-component",
                        "template" : "ACME_KnockoutDemo/custom-component",
                        "entityId": "<?= /* @escapeNotVerified */ $product->getId() ?>"
                    }
                }
            }
        }
    }
</script>

custom-component.js

define([
  'uiComponent',
  'ko',
  'mage/url',
  'mage/storage',
  ], function (Component, ko, urlBuilder,storage) {
        'use strict';
        return Component.extend({

            initialize: function () {
                this._super();
            },

            getInfo:function () {
                var serviceUrl = urlBuilder.build('acme/getinfo?id=' + #ENTITIYID);
                storage.post(
                  serviceUrl,
                 ''
             ).done(
                 function (response) {
                     var jsonObj = JSON.parse(response);
                     this.info = jsonObj.info;
                 }
             ).fail(
                 function (response) {

                 }
             );

            }

        });
    }
);

custom-component.html

<div data-bind="scope: getInfo()">
  <p data-bind="text: info"></p>
</div>
0

For starters, you have defined the wrong scope in custom-component.html it should be the name of your component. Replace your code with following;

<div data-bind="scope: customcomponent">
  <p data-bind="text: info"></p>
</div>

you will have to define info variable as you're using strict mode and define it to be observable.

define([
  'uiComponent',
  'ko',
  'mage/url',
  'mage/storage',
  ], function (Component, ko, urlBuilder,storage) {
        'use strict';
        return Component.extend({
            defaults: {
             info: ko.observable()
            },
            initialize: function () {
                this._super();
            },

            getInfo:function () {
                var serviceUrl = urlBuilder.build('acme/getinfo?id=' + #ENTITIYID);
                storage.post(
                  serviceUrl,
                 ''
             ).done(
                 function (response) {
                     var jsonObj = JSON.parse(response);
                     this.info = jsonObj.info;
                 }
             ).fail(
                 function (response) {

                 }
             );

            }

        });
    }
);

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.