Knockout: Nie można przetworzyć wiązania

Question

Zadałem to pytanie wcześniej, ale nie otrzymałem odpowiedzi.

otrzymuję komunikat o błędzie, gdy uruchomię mój kod:

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

funkcja edycji ma przełączać prawda/fałsz, a następnie przełączyć się do trybu edycji, gdy przycisk jest wciśnięty. Ten przycisk jest wywoływany przez foreach w html, więc domyślam się, że ma to coś wspólnego z moim modelem viewmodel. Dane wyjściowe otrzymane z mojego getJson działają dobrze, ale funkcja edytowalna w jakiś sposób jest w konflikcie.

Oto mój kod html:

<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> 

I tu jest mój 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

Zrobiłem to coś z kodem teraz przełączać pracuje bez zarzutu.

proszę znaleźć ten Working Fiddle

Widok:

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

Zobacz 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); 
}); 

Jeśli problem nadal istnieje, proszę skorzystania z wyżej skrzypce i starają się budować swoją Kod w nim daj mi znać.