녹아웃 : 바인딩을 처리 할 수 ​​없습니다.

Question

나는이 질문을 일찍 요청했지만 대답을 얻지 못했습니다. 편집 가능한 기능이 참/거짓 전환하기로하고 다음 버튼을 누르면 편집 모드로 전환됩니다

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

: 내 코드를 실행하면

는이 오류 메시지가 표시됩니다. 이 버튼은 html에서 foreach를 통해 호출되므로 내 viewmodel과 관련이 있다고 생각합니다. 내 getJson에서 얻은 출력은 제대로 작동하지만 편집 가능한 함수가 어떻게 든 충돌합니다. 여기

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

그리고 내 자바 스크립트입니다 :

 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

내가 지금 잘 작동 전환 코드에서 그 무언가를 만들어가

여기 내 html 코드이다.

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

보기 모델 :

이 Working Fiddle

보기 찾을하시기 바랍니다 문제가 계속 존재하는 경우

$(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); 
}); 

위의 바이올린을 사용하고 구축하는 시도하십시오 당신의 그것의 코드는 저에게 알려줍니다.