CODEWITHSUNDEEP
javascriptarraysknockout.js
Rekha Jayaram
Rekha Jayaram

Reputation: 131

knockout observable array is not updating view on removing elements from array

Here is my view model code

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());

Here is my html for the 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>

The view initially display all the Topics in my fakeData Array. On clicking the remove Button, I am trying to remove an element from the array, and expected the view to refresh and not show the removed item any more. However the view still shows all the 3 topics.

Could someone please point to what I might be doing wrong. I spend a long time researching the other similar queries on stackoverflow, but am still stuck. Thanks so much for any insight into this issue.

Upvotes: 1

Views: 2564

Answers (2)

ebram khalil
ebram khalil

Reputation: 8321

you have 2 issues in your code.
First, you are setting your observableArray topicsArr with non observableArray or normal array in refresh function. Instead use self.topicsArr(fakeTopicData)

Second, in function removeProfile you are using pop() to remove profile element. From KnockoutJS documentation:

myObservableArray.pop() removes the last value from the array and returns it

So, it's better to use remove(item) and pass to it your profile element or loop through your array and remove that specific item

myObservableArray.remove(someItem) removes all values that equal someItem and returns them as an array

Upvotes: 2

Martin Booth
Martin Booth

Reputation: 8595

You are replacing your observable array called topicsarr with one which isn't observable in your refresh method...

Change

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

};

to

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

};

Upvotes: 2

Related Questions