Question

我有一个问题列表，每个问题都有一个答案列表，我使用淘汰赛一次显示每个问题1。我正在做的是使用完整列表设置我的模型，然后使currentQuestion属性可观察，并在每个问题得到解答后，我将其增加到下一个问题。问题是当用户将其悬停时我必须更改一些关于问题的数据，但是无法弄清楚如何使答案可观察到。

我已将jsfiddle放在一起，我想要做的是在用户点击答案时将答案文字更改为“已修改”。

如何使AnswerText可观察，以便当点击处理程序更改其值时，这将反映在UI中。

任何我出错的想法都会受到赞赏。

以下是jsfiddle代码：

<div class="top">
  <div data-bind="foreach: currentQuestion().Answers">
    <div data-bind="click: $root.answerClicked">
      <div data-bind="text: AnswerText"></div>
    </div>
  </div>
</div>


function MyVM() {
  var self = this;

  this.session = {
    Questions: [
      {
        QuestionText: "Q1",
        Answers: [
          {
            AnswerText: "Q1A1"
          },
          {
            AnswerText: "Q1A2"
          }
        ]
      },
      {
        QuestionText: "Q2",
        Answers: [
          {
            AnswerText: "Q2A1"
          },
          {
            AnswerText: "Q2A2"
          }
        ]
      }
        ]
  };

  this.currentQuestion = ko.observable();
  this.currentQuestion(self.session.Questions[1]);

  this.answerClicked = function (selectedAnswer, event) {
    alert('hello');
    selectedAnswer.AnswerText = 'modified1';
    selectedAnswer.AnswerText('modified');
  };
}

var model = new MyVM();
ko.applyBindings(model);

Answer 1

目前，您正在将UI绑定到静态字符串。为了使UI反映更改，字符串必须包含在您所说的可观察对象中，这听起来就像您在正确的轨道上。您需要做的就是在每个答案对象中使用一个observable。

    Answers: [
      {
        AnswerText: ko.observable("Q2A1")
      },
      {
        AnswerText: ko.observable("Q2A2")
      }
    ]

然后在click函数中，您将要删除第一个赋值运算符，它将替换observable，并仅使用第二行，而是将值赋给observable。

  this.answerClicked = function (selectedAnswer, event) {
    alert('hello');
    //selectedAnswer.AnswerText = 'modified1';
    selectedAnswer.AnswerText('modified');
  };

更新淘汰限定列表中的项目

1 个答案: