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/
To trigger an element deletion, simply send an event on the subject: this. deleteSubject. next({op:'delete', id: '1'});
It can be like this. var model = { "xId": ko. observable(0), "xName": ko. observable(null), "Type": ko.
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.
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.
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');
Working remove function:
self.removePlayer = function (name) { self.players.remove(function(player) { return player.name == name }); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With