Observable Array UI not being updated when an item is changed

Question

this is inside my view model.

self.Notifications = ko.observableArray(); // loaded by ajax

self.MarkAsFlagged = function(item) { //updates the item in Notifications
        console.log('MarkAsFlagged');
        var index = self.Notifications.indexOf(item);
        console.log(index);

        var flagStatus = item.Flagged; // current flagstatus
        item.Flagged = !flagStatus; // set true if false and viceversa

        flagStatus = !flagStatus;// set true if false and viceversa
        self.Notifications.replace(self.Notifications()[index], item);
}

this is my html

<ul data-bind="foreach: Notifications "  >
 <li>
   <span data-bind="text: Name" style="font-weight: bold;"></span>       
   <div style="float: right; width:15px;">
       <input type="image" id="" data-bind="click:function(){$parent.MarkAsFlagged($data)},css: {flagged: Flagged==true, unFlagged: Flagged==false }" style='float:right;padding-right:3px;' />
   </div>
 </li>
</ul>

when i click the MarkedAsFlagged and replace the item on self.Notifications() the ui is not changing.

the ui only responses when i remove any item from the array. please help here.

alexmac · Accepted Answer · 2013-12-30 09:39:03Z

1

Item props in Notifications array is not observable. So, when you change it in MarkAsFlagged, ui is not updated. You should create own model for item with observable props:

function ItemModel(data) {
    var self = this;
    self.Name = ko.observable(data.Name);
    self.Flagged = ko.observable(data.Flagged);
}

function ViewModel() {
    var self = this;
    self.Notifications = ko.observableArray();

    self.loadNotifications = function() {
       // loading data...

       var itemModels = _.map(data, function (item) {
           return new ItemModel(item);
       }); 
       ko.utils.arrayPushAll(self.Notifications(), itemModels);
    }
}

edited Dec 30, 2013 at 9:39

answered Dec 27, 2013 at 12:06

alexmac

19.7k7 gold badges65 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ruchan Over a year ago

it says "_" is not defined. i am using knockout 2.1 . is there anything missing?

Ruchan Over a year ago

thanks i used $.map and it is working. thanks very much

Ruchan Over a year ago

can u edit your answer, your self.loadNotifications() at last line must be a typo?

alexmac Over a year ago

yep, it's a bug, i've changed to self.Notifications.

Collectives™ on Stack Overflow

Observable Array UI not being updated when an item is changed

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related