TypeError：myObservableArray未定义

Posted 2021-05-05

我有一个可观察的数组，我希望能够使用knockout.js框架通过html中的按钮删除条目。然而，当我尝试在this.comments函数中使用可观察数组deleteComment时，我得到了一个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);
    };
};

答案

使用函数时，此范围会更改。常规解决方法是在顶部定义自变量，并在需要访问整个函数范围时使用它。

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

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

另一答案

最简单的解决方法是使用箭头函数，因为它们从上下文继承this。

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

          this.comments.splice(index,1);

      }
...