1

I'm trying to create a variable in my knockoutjs component that I can reference later on, and it's not really working, and i'm not sure why, can anyone give me some tips on how to access the "text" attribute, or add any other sort of local variable i can access in my script?

Here's what i'm working with:

define([
    'ko',
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'Magento_Ui/js/modal/confirm',
    'jquery',
    "jquery/ui"
], function(ko, component, customerData, modalold, $){
    'use strict';
    return component.extend({
        text: "Hello World",
        initialize: function(){
            this._super();
            $("#add_motorcycles").modal({
                class: 'garage-modal',
                clickableOverlay: true,
                buttons: [
                    {
                        text: 'Add Motorcycle',
                        class: 'action-primary action-accept',
                        click: function () {
                            console.log("Added motorcycle!");
                        }
                    },
                    {
                        text: 'Cancel',
                        class: 'action-secondary action-dismiss',
                        click: function () {
                            this.closeModal();
                        }
                    }
                ],
                closed: function () {
                    $("#add_motorcycles").html("");
                }
            });
        },
        addMotorcycle: function () {
            console.log(this);
            console.log(self);
            console.log(text);
            console.log("Opened!");
        }
    });
});

How can I access the text variable?

Inside of addMotorcycle, console.log(this) outputs the following JSON

{
  "ignoreTmpls": {
    "templates": true,
    "childDefaults": true
  },
  "_requesetd": {},
  "containers": [],
  "exports": {},
  "imports": {},
  "links": {},
  "listens": {},
  "name": "garage",
  "ns": "garage",
  "provider": "",
  "registerNodes": true,
  "statefull": {},
  "template": "ui/collection",
  "tracks": {},
  "storageConfig": {
    "provider": "localStorage",
    "namespace": "garage",
    "path": "localStorage:garage"
  },
  "maps": {
    "imports": {},
    "exports": {}
  },
  "modules": {
    "storage": "localStorage"
  },
  "_elems": [],
  "component": "Revival_Garage/js/view/garage",
  "extendProvider": true,
  "index": "garage",
  "dataScope": "",
  "parentName": "",
  "parentScope": ""
}
0

Apparently things outside of the return statement stay in scope of the component, which is nice.

I ended up with the following:

define([
    'ko',
    'uiComponent',
    'Magento_Customer/js/customer-data',
    'Magento_Ui/js/modal/confirm',
    'jquery',
    "jquery/ui"
], function(ko, component, customerData, modalold, $){
    var text = 'Hello World';
    'use strict';
    return component.extend({
        initialize: function(){
            this._super();
            $("#add_motorcycles").modal({
                class: 'garage-modal',
                clickableOverlay: true,
                buttons: [
                    {
                        text: 'Add Motorcycle',
                        class: 'action-primary action-accept',
                        click: function () {
                            console.log("Added motorcycle!");
                        }
                    },
                    {
                        text: 'Cancel',
                        class: 'action-secondary action-dismiss',
                        click: function () {
                            this.closeModal();
                        }
                    }
                ],
                closed: function () {
                    $("#add_motorcycles").html("");
                }
            });
        },
        addMotorcycle: function () {
            console.log(text);
            console.log("Opened!");
        }
    });
});

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.