ネットワーク経由でマルチプレイヤーゲームを作成しているため、ネットワークイベントに対応する必要があります。
この単純なコードはありますが、removePlayerメソッドは機能しません。 addPlayer()は正常に動作します。
<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/
self.removePlayer = function (Name) {
self.players.remove(function(player) {
return player.name == Name;
});
}
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');
作業削除機能:
self.removePlayer = function (name) {
self.players.remove(function(player) {
return player.name == name
});
}
あなたが持っている2つのエラーを除いて、あなたのコードは問題ありません:
if (self.players()[i].name == Name) console.log(i);
self.players().splice(i, 1);
最初にここで2行を実行しているので、両方を実行するには{}
を使用する必要があるため、次のコードで置き換えます。
if (self.players()[i].name == Name) {
console.log(i);
self.players.splice(i, 1);
}
2番目にsplice
を使用する場合は、()
で監視可能な配列を呼び出す必要があるため、次のように使用します。
self.players.splice(i, 1);
ノックアウトサイトからの最高のソースごとに: https://knockoutjs.com/documentation/observableArrays.html
Removeメソッドdirect-self.players.remove(self.players()[i]);を使用できます。
次のようにプレーヤーの配列にビューモデルを追加する場合:
self.addPlayer = function (Name, QueuePos, Score) {
self.players.Push(new PlayerVM(Name, QueuePos, Score)));
}
その後、次のようにプレーヤーオブジェクトを削除できます。
self.removePlayer = function (player) {
self.players.remove(player);
}
または、プレーヤーvm内から:
parentVM.players.remove(self);