Magento 在函数内部无法访问可观察到的敲除

因此，我正在使用Magento 2.3.4中的Knockout，在初始化时设置一个自定义的可观察值，然后我尝试访问该可观察值并更改函数中的值。每次我尝试，我总是得到“它不是一个函数”，它既不允许我检索和读取当前的可观察值，也不允许我设置一个新值。当我尝试在其上运行.isObservable（）时，它显示为false。我看过各种各样的例子，都试过了，但都不管用。目前，我的淘汰JS表单如下所示：

define([
'jquery',
'uiComponent',
'ko'
], function($, Component, ko) {
'use strict';

return Component.extend({
   defaults: {
       template: 'Shmoop_Cms/career-form'
   },
    progressText: ko.observable(false),

    initialize: function() {
       var self = this;

       this._super();

           this.progressText('1 of 15 questions completed');

        return this;
    },

    showNext: function() {
       let dataIndex = parseInt($('.quiz-card.show').attr('data-index')) + 1;
       alert(ko.isObservable(this.progressText));
       alert(this.progressText());
       
       this.progressText(dataIndex + ' of 15 questions completed');
    }

});

});

<div class="career-quiz-wrapper">
<!-- ko if: quizQuestions -->
<form class="career-quiz-form" data-bind="foreach: quizQuestions">
    <div class="quiz-card" data-bind="attr: {'data-question-uuid': uuid, 'data-index': index }, css: index == 0 ? 'show' : 'hide'">
        <h2 class="display-heading title">How important is it to you to...</h2>
        <div class="lead main-text" data-bind="html: question"></div>
        <div class="choices">
            <div class="row-bar">
                <input type="range" data-anchor="range" class="custom-range" min="0" max="100" value="50" autocomplete="off" data-bind="event: { change: $parent.adjustRangeSlider }">
            </div>
            <div class="row-options">
                <div class="option-section" data-bind="foreach: choiceUUIDs">
                    <div class="choice-option-button">
                        <a class="option-button" data-bind="click: $parents[1].choiceClicked, attr: { 'data-choice-uuid': UUID, 'data-range-value': rangeValue, title: textOption }, text: textOption, css: (i && i == 2) ? 'selected' : ''"></a>
                    </div>
                </div>
                <div class="mobile-bar">
                    <input type="range" data-anchor="range" class="custom-range" min="0" max="100" value="50" autocomplete="off" data-bind="event: { change: $parent.adjustRangeSlider }">
                </div>
            </div>
        </div>
        <div class="choice-buttons">
            <div class="choice-button">
                <a data-bind="click: $parent.showCareers" class="blue-link" title="Show Careers">Show Careers</a>
            </div>
            <!-- ko if: index == ($parent.quizQuestions().length - 1) -->
                <div class="choice-button">
                    <a class="pink-button results-button" data-bind="click: $parent.getResults" title="Get Results">Get Results <i class="fa fa-cog fa-spin d-none"></i></a>
                </div>
            <!-- /ko -->
            <!-- ko ifnot: index == ($parent.quizQuestions().length - 1) -->
                <div class="choice-button">
                    <a class="pink-button next-question" data-bind="click: $parent.showNext" title="Next Question">Next Question</a>
                </div>
            <!-- /ko -->
        </div>
        <div class="quiz-progress">
            <p class="progress-text" data-bind="text: $parent.progressText"></p>
        </div>
    </div>
</form>
<!-- /ko -->
<!-- ko ifnot: quizQuestions -->
<div class="error-message">
    <p>
        Sorry, something went wrong. I guess you'll have to figure out what to do on your own..
    </p>
</div>
<!-- /ko -->

我能够在初始化函数中设置progressText值，而不会出现问题，并且它在那里识别出它是可观察的。为什么它说它不是“showNext”函数可以观察到的

仅供参考，我还尝试在我的函数中添加“var self=this”，我还尝试了“self.progressText（）”而不是“this.progressText（）”，但没有任何效果

请帮忙

编辑：顺便说一下，我的模板如下所示：

define([
'jquery',
'uiComponent',
'ko'
], function($, Component, ko) {
'use strict';

return Component.extend({
   defaults: {
       template: 'Shmoop_Cms/career-form'
   },
    progressText: ko.observable(false),

    initialize: function() {
       var self = this;

       this._super();

           this.progressText('1 of 15 questions completed');

        return this;
    },

    showNext: function() {
       let dataIndex = parseInt($('.quiz-card.show').attr('data-index')) + 1;
       alert(ko.isObservable(this.progressText));
       alert(this.progressText());
       
       this.progressText(dataIndex + ' of 15 questions completed');
    }

});

});

<div class="career-quiz-wrapper">
<!-- ko if: quizQuestions -->
<form class="career-quiz-form" data-bind="foreach: quizQuestions">
    <div class="quiz-card" data-bind="attr: {'data-question-uuid': uuid, 'data-index': index }, css: index == 0 ? 'show' : 'hide'">
        <h2 class="display-heading title">How important is it to you to...</h2>
        <div class="lead main-text" data-bind="html: question"></div>
        <div class="choices">
            <div class="row-bar">
                <input type="range" data-anchor="range" class="custom-range" min="0" max="100" value="50" autocomplete="off" data-bind="event: { change: $parent.adjustRangeSlider }">
            </div>
            <div class="row-options">
                <div class="option-section" data-bind="foreach: choiceUUIDs">
                    <div class="choice-option-button">
                        <a class="option-button" data-bind="click: $parents[1].choiceClicked, attr: { 'data-choice-uuid': UUID, 'data-range-value': rangeValue, title: textOption }, text: textOption, css: (i && i == 2) ? 'selected' : ''"></a>
                    </div>
                </div>
                <div class="mobile-bar">
                    <input type="range" data-anchor="range" class="custom-range" min="0" max="100" value="50" autocomplete="off" data-bind="event: { change: $parent.adjustRangeSlider }">
                </div>
            </div>
        </div>
        <div class="choice-buttons">
            <div class="choice-button">
                <a data-bind="click: $parent.showCareers" class="blue-link" title="Show Careers">Show Careers</a>
            </div>
            <!-- ko if: index == ($parent.quizQuestions().length - 1) -->
                <div class="choice-button">
                    <a class="pink-button results-button" data-bind="click: $parent.getResults" title="Get Results">Get Results <i class="fa fa-cog fa-spin d-none"></i></a>
                </div>
            <!-- /ko -->
            <!-- ko ifnot: index == ($parent.quizQuestions().length - 1) -->
                <div class="choice-button">
                    <a class="pink-button next-question" data-bind="click: $parent.showNext" title="Next Question">Next Question</a>
                </div>
            <!-- /ko -->
        </div>
        <div class="quiz-progress">
            <p class="progress-text" data-bind="text: $parent.progressText"></p>
        </div>
    </div>
</form>
<!-- /ko -->
<!-- ko ifnot: quizQuestions -->
<div class="error-message">
    <p>
        Sorry, something went wrong. I guess you'll have to figure out what to do on your own..
    </p>
</div>
<!-- /ko -->

对你来说…有多重要。。。
演艺事业
取得成果
下一个问题


对不起，出了点问题。我想你得自己想想怎么办。。

我以前遇到过javascript对象文本的问题，可能会这样处理。不确定这是否有效，因为我还没有测试过

定义([
“jquery”，
“uiComponent”，
“高”
]，函数（$，组件，ko）{
"严格使用",；
var self=这个；
self.progressText=ko.可观察（假）；
函数初始化（）{
这个；
self.progressText（完成15个问题中的1个）；
归还这个；
}
函数showNext（）{
让dataIndex=parseInt（$（'.quitch card.show'）.attr（'data-index'））+1；
警报（ko.isoservable（self.progressText））；
警报（self.progressText（））；
self.progressText（数据索引+“完成15个问题”）；
}
返回组件.extend({
默认值：{
模板：“Shmoop\U Cms/职业表格”
},
progressText:self.progressText，
初始化：初始化，
showNext:showNext
});
});您在何处以及如何绑定showNext函数，是否也可以提供模板？我添加了我的模板，以显示我是如何绑定showNext函数的。