Expose function variables, locally, within component

Question

I have a flightJS component (don't start) and need a way to expose the translated text from bindTranslations after my component has been initialized so that local functions can access the translated values. This is pseudo code of how I would like it to work, but my JS knowledge is failing me :(

function paymentForm() {
  this.bindTranslations = function() {
    var buttonText = I18n.t('js.process_payment_button');
    var paragraphText = I18n.t('js.process_payment_paragraph');

    return {
      button: buttonText,
      paragraph: paragraphText
    }
  };  

  this.handlePaymentState = function() {
    this.select('submitButtons').val(buttonText);
    this.select('paymentParagraph').val(paragraphText);
  }

  this.after('initialize', function() {
    this.bindTranslations();
  }
}

export default paymentForm;

score 2 · Accepted Answer · answered Jan 15 '18 at 14:54

2

Just move declarations of buttonText and paragraphText up one level to parmentForm. They will be captured in closure in bindTranslations and handlePaymentState:

function paymentForm() {
  var buttonText;
  var paragraphText;
  this.bindTranslations = function() {
    buttonText = I18n.t('js.process_payment_button');
    paragraphText = I18n.t('js.process_payment_paragraph');

    // ...

answered Jan 15 '18 at 14:54

flapenguin

380
1
3
16

They may need to be referenced multiple times within a component from different methods - hence the global definition requirement. – jsldnppl Jan 15 '18 at 14:58
They will be available from all methods (`this.blablah = function() {`) inside `paymentForm`. – flapenguin Jan 15 '18 at 15:23

Expose function variables, locally, within component

1 Answers1