Usuń konkretny element z tablicy w Knockout.JS

Question

Tworzę grę wieloosobową przez sieć, więc muszę reagować na zdarzenia sieciowe.

Mam ten prosty kod, ale metoda removePlayer nie działa. AddPlayer() działa dobrze.

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

Herezje http://jsfiddle.net/xseTc/

Answer 1

Musisz użyć 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', '0', '0'); 

Answer 2

robocza usunąć funkcja:

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

Answer 3

kod jest w porządku z wyjątkiem 2 błąd:

if (self.players()[i].name == Name) console.log(i); 
    self.players().splice(i, 1); 

pierwszy tu jesteś wykonywania 2 linie tak, aby wykonaj je oba, musisz użyć {}, zamień go na:

if (self.players()[i].name == Name) { 
    console.log(i); 
    self.players.splice(i, 1); 
} 

drugiego do korzystania splice zrobiłeś potrzeby zadzwonić do zaobserwowania tablicę z () więc można go używać w następujący sposób:

self.players.splice(i, 1); 

Working Demo