Question

这是我的视图模型代码

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：

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

视图最初显示我的fakeData数组中的所有主题。单击删除按钮，我试图从数组中删除一个元素，并期望视图刷新，不再显示已删除的项目。但是视图仍然显示了所有3个主题。

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

Answer 1

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

更改

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

};

到

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

};

Answer 2

您的代码中有2个问题首先，您要在topicsArr函数中使用非 observableArray或普通数组设置observableArray refresh。而是使用self.topicsArr(fakeTopicData)

第二次，在功能removeProfile中，您使用pop()删除profile元素。来自KnockoutJS文档：

myObservableArray.pop（）从数组中删除最后一个值返回它

因此，最好使用remove(item)并将profile元素传递给它，或者循环遍历数组并删除该特定项

myObservableArray.remove（someItem）删除所有相等的值 someItem并将它们作为数组返回

knockout observable array没有更新从数组中删除元素的视图

2 个答案: