Question

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>

Answer 1

Because you are closing your anchor tag: <a />, it is getting rendered in a strange way where an extra anchor tag is outside of the foreach and not in a context where answerClick is a valid function.

I am not sure what content that you want to use for your link, but you need to have an opening and closing tag like:

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

Not sure if you intended to wrap the content in that link, but that is where your issue lies.

Sample: http://jsfiddle.net/rniemeyer/hCdF8/2/