Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove specific element from array in Knockout.JS

I am creating a multiplayer game over network so I have to react on network events.

I have this simple code, but the removePlayer method doesnt work. The addPlayer() works fine.

<table id="userlist2" class="tablesorter" cellspacing="0">     <thead>         <tr>             <th>Name</th>             <th>Queue</th>             <th>Points</th>         </tr>     </thead>     <tbody data-bind="foreach: players">         <tr>             <td data-bind="text: name"></td>             <td data-bind="text: queue"></td>             <td data-bind="text: score"></td>         </tr>     </tbody> </table>   function PlayerViewModel() {     var self = this;     self.players = ko.observableArray();      self.addPlayer = function (Name, QueuePos, Score) {         self.players.push({             name: Name,             queue: QueuePos,             score: Score         });     }       self.removePlayer = function (Name) {         for (var i = 0; i < self.players().length; i++) {              if (self.players()[i].name == Name) console.log(i);             self.players().splice(i, 1);         }     } }   players = new PlayerViewModel(); ko.applyBindings(players);  players.addPlayer('Player1', '0', '0'); players.addPlayer('Player2', '0', '0'); players.removePlayer('Player2'); 

Heres the http://jsfiddle.net/xseTc/

like image 807
NoWhereToBeSeen Avatar asked Jul 13 '13 12:07

NoWhereToBeSeen


People also ask

How do you remove an element from an observable array?

To trigger an element deletion, simply send an event on the subject: this. deleteSubject. next({op:'delete', id: '1'});

How do you clear observable in knockout?

It can be like this. var model = { "xId": ko. observable(0), "xName": ko. observable(null), "Type": ko.

How do I sort knockout observable array?

Description. The KnockoutJS Observable sort() method sorts all items in the array. By default, items are sorted in an ascending order. For sorting an array in a descending order, use reverse() method on sorted array.

What is Ko observableArray?

If you want to detect and respond to changes of a collection of things, use an observableArray . This is useful in many scenarios where you're displaying or editing multiple values and need repeated sections of UI to appear and disappear as items are added and removed.


2 Answers

You have to use the remove function :

self.removePlayer = function (Name) {     self.players.remove(function(player) {         return player.name == Name;     });      } 

See fiddle

html

<table id="userlist2" class="tablesorter" cellspacing="0">     <thead>         <tr>             <th>Name</th>             <th>Queue</th>             <th>Points</th>         </tr>     </thead>     <tbody data-bind="foreach: players">         <tr>             <td data-bind="text: name"></td>             <td data-bind="text: queue"></td>             <td data-bind="text: score"></td>         </tr>     </tbody> </table> 

javascript

function PlayerViewModel() {     var self = this;          self.players = ko.observableArray();        self.addPlayer = function (Name, QueuePos, Score) {         self.players.push({             name: Name,             queue: QueuePos,             score: Score         });     }      self.removePlayer = function (Name) {         self.players.remove(function(player) {             return player.name == Name;         });     } }  players = new PlayerViewModel(); ko.applyBindings(players);  players.addPlayer('Player1', '0', '0'); players.addPlayer('Player2', '0', '0'); players.removePlayer('Player2'); 
like image 194
Damien Avatar answered Oct 04 '22 12:10

Damien


Working remove function:

self.removePlayer = function (name) {     self.players.remove(function(player) {          return player.name == name     }); } 
like image 29
Giannis Avatar answered Oct 04 '22 10:10

Giannis