javascript - 类型错误 : myObservableArray is undefined

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

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

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

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