无法在函数内部访问可观察到的淘汰赛

问题描述

所以我正在使用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');
    }

});

});

我能够最初在该初始化函数内设置progresstext值而不会出现问题，并且它在那里识别出它是可观察的。为什么它说“ showNext”功能无法观察到内部？

仅供参考，我还尝试在函数中添加“ var self = this”，也尝试使用“ self.progresstext（）”而不是“ this.progresstext（）”，

请帮助。

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

<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对象文字方面遇到过问题，可能会这样处理。不知道这是否有效，因为我还没有测试过。

define([
  'jquery','uiComponent','ko'
],function($,Component,ko) {
  'use strict';
  var self = this;
  self.progressText = ko.observable(false);

  function initialize() {
    this._super();
    self.progressText('1 of 15 questions completed');
    return this;
  }

  function showNext() {
    let dataIndex = parseInt($('.quiz-card.show').attr('data-index')) + 1;
    alert(ko.isObservable(self.progressText));
    alert(self.progressText());

    self.progressText(dataIndex + ' of 15 questions completed');
  }
  
  return Component.extend({
    defaults: {
      template: 'Shmoop_Cms/career-form'
    },progressText: self.progressText,initialize: initialize,showNext: showNext
  });
});