Detect change of variable at run time

Question

I am working with a web audio API. In note.jsI am trying to populate an array with a few notes index.jsfor playback. But this does not work properly. However, when I install the array directly in index.js, it works. I have no idea why this is. Basically I want to index.jsplay back all the records that are inserted into the array in note.js. Below I have inserted two versions index.jsto demonstrate what I want to do.

Hope someone can help me with this.

index.js (works)

import NoteModule from './note.js';
const notelist = new NoteModule();

notelist.notes = ['C4','D4','E4','F4','G4','A4','B4','C5'];

let seq = new Tone.Sequence(function(time, note){
    event.humanize = true;
    synth.triggerAttackRelease(note,'8n');

}, notelist.notes, '8n'); 

index.js (not working)

import NoteModule from './note.js';
const notelist = new NoteModule();

let seq = new Tone.Sequence(function(time, note){
    event.humanize = true;
    synth.triggerAttackRelease(note,'8n'); 

}, notelist.notes, '8n');

note.js

import $ from 'jquery';

export default class NoteModule {
constructor(possibleNotes,notes,note) {
    this.possibleNotes = ['','C4','D4','E4','F4','G4','A4','B4'];
    this.notes = notes;
    this.note = 0;
}

init() {
    console.log('NoteModule');
    this.addListeners();
}

addListeners() {
    $('div.step').on('click', this.step.bind(this));
}

step(e) {

    let notes = [];

    $(e.currentTarget).parent().find('.note').text(this.possibleNotes[this.note]);
    this.note = (this.note+1)%(this.possibleNotes.length);

    $('.pads div.note').each(function() {
        let note = $(this).text();

        if (note && note.length > 0) {
            notes.push(note);
        }
    });

this.notes = notes;
}
}

HTML:

                    <div class="pads">                    
                        <div class="pad"><div class="note" data-play=""></div></div>
                        <div class="pad"><div class="note" data-play=""></div></div>
                        <div class="pad"><div class="note" data-play=""></div></div>
                        <div class="pad"><div class="note" data-play=""></div></div>
                    </div>

                    <div class="pads">
                        <div class="pad">
                            <div>
                                <div class="step"><i class="icon-up-open-mini"></i></div>
                                <div class="note"></div>
                                <div class="step"><i class="icon-down-open-mini"></i></div>
                            </div>
                        </div>
                        <div class="pad">
                            <div>
                                <div class="step"><i class="icon-up-open-mini"></i></div>
                                <div class="note"></div>
                                <div class="step"><i class="icon-down-open-mini"></i></div>
                            </div>
                        </div>
                        <div class="pad">
                            <div>
                                <div class="step"><i class="icon-up-open-mini"></i></div>
                                <div class="note"></div>
                                <div class="step"><i class="icon-down-open-mini"></i></div>
                            </div>
                        </div>
                        <div class="pad">
                            <div>
                                <div class="step"><i class="icon-up-open-mini"></i></div>
                                <div class="note"></div>
                                <div class="step"><i class="icon-down-open-mini"></i></div>
                            </div>
                        </div>
                    </div>

Answer 1

, . , Tone.Sequence, - NoteModule, , step , this, .

, - , , ( ). , , , step.

import $ from 'jquery'

export default class NoteModule {

  constructor (callback, notes) {
    this.possibleNotes = ['','C4','D4','E4','F4','G4','A4','B4']
    this.notes = notes
    this.callback = callback
    this.note = 0
    // you need this otherwise the step method won't have access to the context
    this.step = this.step.bind(this)
  }

  init () {
    console.log('NoteModule')
    // make sure this is called, otherwise your events won't work
    $('div.step').on('click', this.step.bind(this))
    $('.play').on('click', () => this.callback(this.notes))
  }

  step (e) {

    const notes = []

    $(e.currentTarget).parent()
      .find('.note')
      .text(this.possibleNotes[this.note])

    this.note = (this.note + 1) % (this.possibleNotes.length)

    $('.pads div.note').each(el => {
      const note = $(el).text()

      if (note && note.length > 0) {
        notes.push(note)
      }
    })

    this.notes = notes
    // or callback here, as you want

  }
}

index.js , , :

import NoteModule from './note.js'

const callback = notes => {
  const seq = new Tone.Sequence((time, note) => {
    event.humanize = true
    synth.triggerAttackRelease(note, '8n')
  }, notes, '8n')
}

new NoteModule(callback)