TypeError：myObservableArrayは定義されていません

Question

knockout.jsフレームワークを使用して、HTMLのボタンを使用してエントリを削除したいという観測可能な配列があります。しかし、私がdeleteComment関数で観測可能な配列this.commentsを使用しようとすると、明確に定義されているにもかかわらず、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; ?> 

Javascriptを：

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

     } 
...