敲门.js中的未定义绑定

Question

作为开发JS应用程序的初学者，目前，我仅限于观察现有代码并尝试在摆弄变量名的同时重现代码（这样我便可以了解自己是否理解正确）。

这就是我用KO.js编写的JS测验代码所做的...这是“我的”版本（根本没有太多更改...）

http://jsfiddle.net/s6EsB/

我的问题是，当我尝试运行代码时，不是在脚本中而是在KO库中得到“ isCorrect is undefined”。 当我注释HTML中包含isCorrect的行时，我仍然在KO库中得到“ correctNbrAnswers is undefined”的信息。

就像KO不理解我在引用适当的模板时使用的数据参数...

<script id="questionView" type="text/html">
        <div>Question <span data-bind="text: index"></span></div>
        <div data-bind="visible: selectedAnswer() === undefined">
            <div data-bind="text: questionText"></div>
            <ul data-bind="template: { name: 'answerView', foreach: answers }"></ul>
        </div>
        <div data-bind="visible: selectedAnswer() !== undefined">
            <div data-bind="template: { name: 'questionResultView', data: selectedAnswer }"></div> <!-- isCorrect id defined for answers, so if KO respects this scope, this should work... But it doesn't! -->
            <a href="#" data-bind="click: $parent.nextQuestion">Next</a>
        </div>
    </script>
    <script id="questionResultView" type="text/html">
        <div data-bind="visible: isCorrect">Bonne réponse !</div> <!-- Returns isCorrect is undefined (knockout.js line blablabla) -->
        <div data-bind="visible: !isCorrect">Non. La bonne réponse était <span data-bind="text: $parent.correctAnswer.answerText"></span></div>
    </script>

如果有人可以阐明这件事，我会喜欢的。

谢谢！

阿里; o）

Answer 1

问题是selectedAnswer可能undefined也可能undefined 。 通常没关系，但是您认为逻辑有点缺陷。

<script id="questionView" type="text/html">
    <div data-bind="visible: selectedAnswer() === undefined">
        <!-- _visible_ if selectedAnswer is undefined -->
    </div>
    <div data-bind="visible: selectedAnswer() !== undefined">
        <!-- _not visible_ if selectedAnswer is undefined -->
        <div data-bind="template: { name: 'questionResultView', data: selectedAnswer }"></div>
    </div>
</script>

注意我添加的评论。

当selectedAnswer undefined时，第一个div 可见 。 表示仍会评估div的主体，只有结果不可见。

当selectedAnswer undefined时，第二个div 不可见 。 身体仍在评估中。 由于模板使用selectedAnswer ，因此它试图呈现undefined对象。 当selectedAnswer undefined时，您需要防止第二个div的主体被求值。

---

您可以通过多种方法来完成此操作，但我们会坚持最简单的方法。

将第二个div上的visible绑定更改为if绑定。 有关更多信息，请参考文档 。 基本上，这与visible绑定非常相似，不同之处在于，如果条件不符合我们的要求，它不评估主体。