He estado usando octavos de final por un tiempo, pero en la redacción de algunos de los ejemplos de código de este me tiene perplejo. El código funciona exactamente como yo estoy esperando, cuando haga clic en el botón, se alterna el visible, pero todavía estoy recibiendo un error:
JsFiddle: http://jsfiddle.net/JasonMore/hCdF8/1/
Uncaught Error: Unable to parse bindings.
Message: ReferenceError: answerClick is not defined;
Bindings value: click: answerClick
de
<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>
Porque se están cerrando su etiqueta de anclaje:
<a />
, que va a ser representado en una manera extraña, donde un extra de etiqueta de anclaje está fuera de laforeach
y no en un contexto dondeanswerClick
es una función válida.No estoy seguro de qué tipo de contenido que desea utilizar para su enlace, pero es necesario tener una apertura y cierre de etiquetas como:
<a class="hiddenButton" href="#" data-bind="click: answerClick">link</a>
No está seguro de si la intención de envolver el contenido de ese enlace, pero que es donde el problema se encuentra.
Ejemplo: http://jsfiddle.net/rniemeyer/hCdF8/2/