Knockout: unable to handle binding

Question

I asked this question before, but did not receive an answer.

I get this error message when running my code:

Uncaught ReferenceError: Unable to process binding "visible: function (){return !editable() }" Message: editable is not defined 

the edited function should switch true / false, and then switch to edit mode when the button is pressed. This button is called through foreach in html, so I assume that it has something to do with my viewmodel. The result that I get from my getJson works fine, but the editable function conflicts somehow.

Here is my html code:

 <div><ul data-bind="foreach: comments"> <li class="ul3"> <span class="author" data-bind="text: nickname, visible: !editable(), click: editComment"> </span> <input type="text" data-bind="value: nickname, visible: editable()"/>: <div> <span class="comment" data-bind="text: newMsg, visible: !editable(), click: editComment"> </span> <textarea class="myComment" type="text" data-bind="value: newMsg, visible: editable()"> </textarea> </div> <button data-bind="click: editComment, text: editable() ? 'Save' : 'Edit comment'"> </button> <button data-bind="click: deleteComment">Delete</button> </li> </ul> </div> 

And here is my javascript:

  function Comment() { var self = this; self.nickname = ko.observable(); self.newMsg = ko.observable(); self.editable = ko.observable(false); self.sendEntry = function () { vm.selectedComment(new Comment()); if (self.newMsg() !== "" && self.nickname() !== "") { $.post(writeUrl, "entry=" + ko.toJSON(self)); self.newMsg(""); } vm.cSection().getNewEntries(); }; self.deleteComment = function () { vm.comments.remove(self); }; self.editComment = function () { self.editable(!self.editable()); }; } function commentSection() { var self = this; self.timestamp = 0; var entry; self.getNewEntries = function () { $.getJSON(readUrl, "timestamp=" + self.timestamp, function (comments) { for (var i = 0; i < comments.length; i++) { entry = comments[i]; if (entry.timestamp > self.timestamp) { self.timestamp = entry.timestamp; } vm.comments.unshift(entry); } self.getNewEntries(); }); }; } function ViewModel(){ var self = this; self.cSection=ko.observable(new commentSection()); self.comments = ko.observableArray(); self.selectedComment = ko.observable(new Comment()); //self.cSection().getNewEntries(); } var vm=new ViewModel(); ko.applyBindings(vm); vm.cSection().getNewEntries(); }); 

Answer 1

I made something from your code, now switching works fine.

find the working script

View:

 <input type="button" data-bind="click: editComment, value:editable() ? 'Save' : 'Edit comment'" /> 

Show model:

 $(document).ready(function() { vm = function ViewModel() { var self = this; self.comments = ko.observableArray(); function Comment() { var self=this; self.editable = ko.observable(false); self.editComment = function() { self.editable(!self.editable()); }; } self.comments.push(new Comment()); }; ko.applyBindings(new vm); }); 

If the problem still exists, use the above script and try to create your code in it, let me know.