Как посмотреть / прослушать переменную и вызвать событие "onChange" (Modular JS)

Question

Я хочу прослушать переменную this.progress. Всякий раз, когда он изменяется - он должен обновлять процент загрузки моих графиков и процент загрузки индикатора выполнения.

Я попытался использовать .change в моем разделе bindEvents(), но я получил ошибку, указав, что нельзя применять функцию .change к переменной (работает только для элементов).

Итак, я попытался сделать что-то вроде this (см. Последнюю переменную в cacheDom):

(function() {

    const qwData = {

        // Initialize functions
        init: function() {
            this.cacheDom();
            this.bindEvents();
        },
        // Cache vars 
        cacheDom: function() {
            this.dataDisplayed  = false;
            this.countUsers     = <?php echo $_SESSION['all_users_count_real']; ?>;
            this.$form          = $('#frm_reportit');
            this.start_date     = this.$form[0][9].value;
            this.end_date       = this.$form[0][10].value;
            this.dateCount      = this.countDays(this.start_date, this.end_date);
            this.show           = document.querySelector('#btn-show');
            this.downloadBtn    = document.querySelector('#download_summary_button');
            this.$dataContainer = $('#qw-data-container');
            this.$qwTable       = $('#qwtable');
            this.$qwTbody       = this.$qwTable.find('tbody');
            this.qwChart        = echarts.init(document.getElementById('main-chart'));
            this.progressBar    = document.querySelector('.progress-bar');
            this.progress       = function(){

                var progressPrecent = 0;

                return {

                    getProgress: function () {
                      return progressPrecent;
                    },
                    updateValue: function(progressPrecent) {
                        this.updateProgressTableChart(progressPrecent);
                    }
                }

            };
        },
        // Bind click events (or any events..)
        bindEvents: function() {

            var that = this;

            // On click "Show" BTN
            this.show.onclick = this.sendData.bind(this, this.start_date, this.end_date);

            // On Change inputs
            this.$form.change(function(){
                that.updateDatesInputs(this);
            });

            // On Change inputs
            /*this.progress.change(function(){

                // Show Chart Loading 
                that.qwChart.showLoading({ 
                    text: that.returnNumWithPrecent(that.progress)
                });
                that.setProgressBarValue(that.progress);

            });*/
        },
        // Get data, prevent submit defaults and submit. 
        sendData: function(sdate, edate, e) {
            e.preventDefault();
            let that = this;

            $.ajax({
                type: 'POST',
                url: "/potato/ajax.php?module=potato_module",
                dataType: 'json',
                data: {
                        start_ts: sdate,
                        stop_ts: edate, 
                        submitted: true
                },
                beforeSend: function() {

                    console.log(that.progress);

                    setTimeout(function (){

                      // Something you want delayed.

                    }, 1000);
                                    that.progress       = 50;

                    setTimeout(function (){

                      // Something you want delayed.

                    }, 2000);
                                    that.progress       = 60;


                    // that.setProgressBarValue(that.progress);

                    // Show Chart Loading 
                    that.qwChart.showLoading({ 
                        color: '#00b0f0'/*, 
                        text: that.returnNumWithPrecent(that.progress)*/
                    });

                    // If data div isn't displayed
                    if (!that.dataDisplayed) {
                        // Show divs loading
                        that.showMainDiv();
                    } else {
                        that.$qwTbody.slideUp('fast');
                        that.$qwTbody.html('');
                    }
                },
                complete: function(){
                },
                success: function(result){
                }
            });

            that.dataDisplayed = true;
        }, 
        ...........
        ......................
        ...................................
        ...............................................
})();

Продолжайте получать эту ошибку в консоли, где console.log(this.progress):

не определено

Answer 1

Вы можете использовать defineProperty со своим собственным установщиком.

    (function() {

    const qwData = {

        // Initialize functions
        init: function() {
            this.cacheDom();
            this.bindEvents();
        },
        // Cache vars 
        cacheDom: function() {
            this.dataDisplayed  = false;
            this.countUsers     = <?php echo $_SESSION['all_users_count_real']; ?>;
            this.$form          = $('#frm_reportit');
            this.start_date     = this.$form[0][9].value;
            this.end_date       = this.$form[0][10].value;
            this.dateCount      = this.countDays(this.start_date, this.end_date);
            this.show           = document.querySelector('#btn-show');
            this.downloadBtn    = document.querySelector('#download_summary_button');
            this.$dataContainer = $('#qw-data-container');
            this.$qwTable       = $('#qwtable');
            this.$qwTbody       = this.$qwTable.find('tbody');
            this.qwChart        = echarts.init(document.getElementById('main-chart'));
            this.progressBar    = document.querySelector('.progress-bar');
            Object.defineProperty(this, "progress", {
                get: () => {
                   return this.progressPrecent || 0;
                },
                set: (value) => {

                    if(value != this.progressPrecent){
                      this.updateProgressTableChart(value);
                      this.progressPrecent = value;
                    }

                }
            });
        },
        // Bind click events (or any events..)
        bindEvents: function() {

            var that = this;

            // On click "Show" BTN
            this.show.onclick = this.sendData.bind(this, this.start_date, this.end_date);

            // On Change inputs
            this.$form.change(function(){
                that.updateDatesInputs(this);
            });

            // On Change inputs
            /*this.progress.change(function(){

                // Show Chart Loading 
                that.qwChart.showLoading({ 
                    text: that.returnNumWithPrecent(that.progress)
                });
                that.setProgressBarValue(that.progress);

            });*/
        },
        // Get data, prevent submit defaults and submit. 
        sendData: function(sdate, edate, e) {
            e.preventDefault();
            let that = this;

            $.ajax({
                type: 'POST',
                url: "/potato/ajax.php?module=potato_module",
                dataType: 'json',
                data: {
                        start_ts: sdate,
                        stop_ts: edate, 
                        submitted: true
                },
                beforeSend: function() {

                    console.log(that.progress);

                    setTimeout(function (){

                      // Something you want delayed.

                    }, 1000);
                                    that.progress       = 50;

                    setTimeout(function (){

                      // Something you want delayed.

                    }, 2000);
                                    that.progress       = 60;


                    // that.setProgressBarValue(that.progress);

                    // Show Chart Loading 
                    that.qwChart.showLoading({ 
                        color: '#00b0f0'/*, 
                        text: that.returnNumWithPrecent(that.progress)*/
                    });

                    // If data div isn't displayed
                    if (!that.dataDisplayed) {
                        // Show divs loading
                        that.showMainDiv();
                    } else {
                        that.$qwTbody.slideUp('fast');
                        that.$qwTbody.html('');
                    }
                },
                complete: function(){
                },
                success: function(result){
                }
            });

            that.dataDisplayed = true;
        }, 
        ...........
        ......................
        ...................................
        ...............................................
})();