敲門.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綁定非常相似，不同之處在於，如果條件不符合我們的要求，它不評估主體。