TypeError : myObservableArray가 정의되지 않았습니다.

Question

knockout.js 프레임 워크를 사용하여 HTML의 버튼을 통해 항목을 삭제할 수 있도록하는 관찰 가능한 배열이 있습니다. 그러나, 내가 이해할 수있는 배열 this.commentsdeleteComment 함수를 사용하려고하면 명확하게 정의되어 있고 항목이 있지만 TypeError: this.comments is undefined 얻을. this.comments은 심지어 잘 작동하는 entryComments 함수에서도 사용됩니다. 내가 놓친 게 있니?

HTML/PHP :

<div class="textblock"> 
      <h1>User Comments</h1> 
      <ul id="usercomment" data-bind="foreach: comments"> 
       <li><p><strong data-bind="text: comment"></strong> - <strong data-bind="text: user"></strong></p> 
         <button data-bind="visible: display(), click: $parent.deleteComment.bind($data, $index)" >Delete Comment</button> 


       </li> 
      </ul> 
     </div> 
     <br /> 
     <?php if (isset($_SESSION['logged_in'])): ?> 
<?php if ($_SESSION['logged_in'] == true): ?> 
      <div class="textblock"> 
       <ul> 
        <li>  
         <form name="commentform" data-bind="submit: enterComment.bind($data,$data.comment)"> 
          <input type="text" data-bind="value: $data.comment"/> 
          <button type="submit">Submit Comment</button> 
         </form> 
        </li> 

       </ul> 
      </div> 
<?php endif; ?> 
     <?php endif; ?> 

자바 스크립트 :이 기능을 사용하면

var AppViewModel = function (commentList, userList) { 
    //Initializing data 
    this.displayButton = ko.observable(false); 
    this.comments = ko.observableArray(); 
    this.username; 
    $.ajax({ 
     url: "http://localhost/sem4/recept/UserInfo.php", 
     async: false, 
     dataType: 'json', 
     success: function(data) { 
      username = data.username; 
     } 
    }); 
    //Giving the array values 
    for(var i = 0;i<=commentList.length -1;i++){ 

     if(username === userList[i]){ 
      this.comments.push(new Comment(commentList[i],userList[i],true)); 
     } 
     else{ 
      this.comments.push(new Comment(commentList[i],userList[i], false)); 
     } 
    };  
    //Function is called but it cannot define this.comments 
     this.deleteComment = function(index){ 

      this.comments.splice(index,1); 

     } 
    //This function works without any problems 
    this.enterComment = function (comment) { 
    $.ajax({ 
     url: "http://localhost/sem4/recept/UserInfo.php", 
     async: false, 
     dataType: 'json', 
     success: function(data) { 
      username = data.username; 
     } 
    }); 

     this.comments.push(new Comment(comment, username,true)); 
     $.post("http://localhost/sem4/recept/AddComment.php", { 
    comment: comment, 
    username: username 
}); 
    }; 



    //OBJECTS 
    function Comment(comment, user,bool) { 
     var self = this; 
     self.comment = ko.observable(comment); 
     self.user = ko.observable(user); 
     self.display = ko.observable(bool); 
    }; 
}; 

Answer 1

이 범위가 변경됩니다. 일반적인 해결 방법은 상단에 자체 변수를 정의하고 전체 함수 범위에 액세스해야 할 때 사용하는 것입니다.

var AppViewModel = function (commentList, userList) { 
    //Initializing data 
    var self = this; 
    .... 

    self.deleteComment = function(index){ 
     self.comments.splice(index,1); 
    } 
    ... 
} 

Answer 2

가장 쉬운 수정은 자신의 컨텍스트에서 this을 상속로, 화살표 기능을 사용하는 것입니다.

... 
    this.deleteComment = (index)=>{ // was function(index){ 

      this.comments.splice(index,1); 

     } 
...