javascript - knockout 可观察数组不会更新从数组中删除元素的 View

Question

这是我的 View 模型代码

var TopicsViewModel = function() {
var self = this;

var fakeTopicData =
 [

 ];


self.createProfile = function () {
    alert("came to create profile");
};

self.editProfile = function () {
    alert("came to edit profile");
};

self.removeProfile = function (profile) {
    alert("came to remove profile");
    fakeTopicData.pop();
    self.topicsArr(fakeTopicData);
};



var refresh = function() {
    self.topicsArr = fakeTopicData;

};


self.topicsArr = ko.observableArray([]);
refresh();

  };


  ko.applyBindings(new TopicsViewModel());

这是我的 html View :

<hr /> 
<hr /> 

<table  class="table table-striped table-bordered table-condensed">
    <tr >
        <th>Area</th>
        <th>Name</th>
        <th>Link</th>
        <th>Description</th>
        <th>Why</th>

    </tr>
    <tbody data-bind="foreach : topicsArr">   
        <tr>
            <td data-bind="text :area"> </td>
            <td class=""><a data-bind="text:name, click:$parent.editProfile"></a></td>           
            <td data-bind="text:link"> </td>
            <td data-bind="text:desc">  </td>
            <td data-bind="text:why" ></td>
            <td><button class="btn btn-mini btn-danger" data-bind="click:$parent.removeProfile">remove</button></td>
        </tr>
    </tbody>

</table>

 <script src="~/Scripts/Topic.js"></script>

该 View 最初显示我的 fakeData 数组中的所有主题。单击删除按钮时，我试图从数组中删除一个元素，并希望 View 刷新并且不再显示已删除的项目。然而，该 View 仍然显示所有 3 个主题。

有人可以指出我可能做错了什么吗？我花了很长时间研究 stackoverflow 上的其他类似查询，但仍然卡住了。非常感谢您对此问题的任何见解。

Answer 1

您正在将名为 topicsarr 的可观察数组替换为在您的刷新方法中不可观察的数组...

改变

var refresh = function() {
    self.topicsArr = fakeTopicData;

};

到

var refresh = function() {
    self.topicsArr(fakeTopicData);

};