Knockout: Unable to process binding

问题:

I asked this question earlier but did not get an answer.

I get this error message when I run my code:

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

the editable function is supposed to toggle true/false and then switch to edit mode when a button is pressed. This button is called through a foreach in the html so i'm guessing it has something to do with my viewmodel. The output 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();  }); 

回答1:

I made it something from your code now toggle is working fine .

please find this Working Fiddle

View :

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

View 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 issue still exists please make use of above fiddle and try to build your code in it let me know .

文章来源: Knockout: Unable to process binding