Knockout.JSの配列から特定の要素を削除します。

Question

ネットワーク上でマルチプレイヤーゲームを作成していますので、ネットワークイベントに対応する必要があります。

私はこの単純なコードを持っていますが、removePlayerメソッドは機能しません。 addPlayer（）はうまく動作します。あなたはremove functionを使用する必要が

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

相続人http://jsfiddle.net/xseTc/

Answer 1

：

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

ワーキング機能を削除します。

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

になるあなたは2行を実行している、ここで最初：

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

Answer 3

あなたのコードは、あなたが持っている2エラーを除いて結構ですそれらを実行するには{}を使用する必要がありますので、それを次のように置き換えてください：

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

あなたがそうあなたは、次のようにそれを使用する()であなたの観察可能な配列をコールする必要が行わsplice使用する2番目：

self.players.splice(i, 1); 

Working Demo