How to establish global variables for functions - Polymer

Question

I have searched through some of the documents on here, but I couldn't quite figure it out.

Basically I am wanting to set some variables globally for this one particular file only (so like a local global variable), so I don't need to keep defining them for every function I use, because it will become rather long and tiring to get through.

Any advice would be fab!

I know that global variables and things are difficult to do in Polymer for situations like this, but I'm hoping that I can learn how to do it as it would save me a lot of time and effort.

Original JS

Polymer({

  is: 'settings-page',

  properties: {
      response : {
          type : Object
      },
  },

  /* have iron pages show the saved state of each section to start with */
  ready: function () {
      this.selected = 'saved';
      this.selection = 'saved';
  },

  editDetails : function () {
      /*    click edit | open edit mode | edit icon disappears | save & cancel icons appear     */

      var editButton = this.$.editInfo;
      var saveButton = this.$.saveInfo;
      var cancelButton = this.$.clearInfo;

      saveButton.classList.add('show');
      cancelButton.classList.add('show');
      editButton.classList.add('hide');
  },

/* There are saveDetails and cancelDetails functions below doing 
    pretty much the same stuff. */

JS after seeing example online

(function() {
    var data = {
            editInfo: this.$.editInfo,
            saveInfo: this.$.saveInfo,
            cancelInfo: this.$.clearInfo
    }

    Polymer({

      is: 'settings-page',

      properties: {
          response : {
              type : Object
          },
      },

      /* have iron pages show the saved state of each section to start with */
      ready: function () {
          this.selected = 'saved';
          this.selection = 'saved';
          this.data = data;
      },

      editDetails : function () {
          /*    click edit | open edit mode | edit icon disappears | save & cancel icons appear     */


          saveButton.classList.add('show');
          cancelButton.classList.add('show');
          editButton.classList.add('hide');
      },

 /* There are saveDetails and cancelDetails functions below doing 
    pretty much the same stuff. */

Answer 1

Unfortunately there is no way to declare global vars in polymer, you have 2 ways.

The best way in my opinion is declare your variables into the properties field given by polymer.

properties: {
  response : {
      type : Object
  },
  editButton: {
      type: Object
  },
  //more declarations
},

ready: function () {
    this.editButton = this.$.editInfo;
    //more assignations
}

In your case i would use this.$.editInfo directly, without an auxiliar variable according to the 'KISS' principle.

The second way is so ugly but for define global variables you can use the window Object to set your variables.