Javascript TypeError:myObservableArray未定义

我有一个可观察的数组，我希望能够使用knockout.js框架通过HTML中的按钮从中删除条目。但是，当我尝试在

deletecoment

函数中使用可观察数组

this.comments

时，我得到一个

TypeError:this.comments未定义，即使它定义明确并且有条目
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);
    };
};

var-AppViewModel=函数（commentList，userList）{
//初始化数据
this.displayButton=ko.可观察（假）；
this.comments=ko.observearray（）；
这是用户名；
$.ajax({
url:“http://localhost/sem4/recept/UserInfo.php",
async:false，
数据类型：“json”，
成功：功能（数据）{
用户名=data.username；
}
});  
//给出数组值
对于（var i=0；i当您使用函数时，此范围会发生变化。常规的解决方法是在顶部定义一个自变量，并在需要访问整个函数范围时使用它

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

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

使用函数时，此作用域会发生变化。常规的解决方法是在顶部定义一个自变量，并在需要访问整个函数作用域时使用它

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

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

最简单的修复方法是使用箭头函数，因为它们从上下文继承
这个

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

          this.comments.splice(index,1);

      }
...

最简单的修复方法是使用箭头函数，因为它们从上下文继承
这个

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

          this.comments.splice(index,1);

      }
...

啊，我见过有人这样做，但我不知道它是为了什么。不过现在似乎有效。谢谢！啊，我见过有人这样做，但我不知道它是为了什么。不过现在似乎有效。谢谢！