I've been using knockout for a while, but in writing up some code examples this one has me stumped. The code works exactly as I'm expecting, where the click button toggles the visible, but I'm still getting an error:

JsFiddle: http://jsfiddle.net/JasonMore/hCdF8/1/

Uncaught Error: Unable to parse bindings.

Message: ReferenceError: answerClick is not defined;

Bindings value: click: answerClick

from

<ul data-bind=foreach: answers>

    <li>

        <a class=hiddenButton href=# data-bind=click: answerClick />

        <div class=answerNumber data-bind=visible: showAnswerNumber>

            <h2 data-bind=text: answerNumber />

        </div>

        <div class=answer data-bind=visible: showAnswerText>

            <p data-bind=text:text />

            <p data-bind=text: points />

        </div>

    </li>

</ul>



<script type=text/javascript>



    var answerViewModel = function () {

        var self = this;



        //clicks

        self.answerClick = function () {

            self.showAnswerNumber(!self.showAnswerNumber());

        };



        //observables

        self.answerNumber = ko.observable();

        self.text = ko.observable();

        self.points = ko.observable();

        self.showAnswerNumber = ko.observable(true);



        //computed

        self.showAnswerText = ko.computed(function () {

            return !self.showAnswerNumber();

        });

    };



    var roundViewModel = function () {

        var self = this;

        self.answers = ko.observableArray();

    };



    var answer1 = new answerViewModel();

    answer1.text = foo answer;

    answer1.answerNumber = 1;

    answer1.points = 50;



    var vm = new roundViewModel();

    vm.answers.push(answer1);



    ko.applyBindings(vm);



</script>