web-dev-qa-db-ja.com

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

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

この単純なコードはありますが、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/

javascripthtmlknockout.js
39
NoWhereToBeSeen

remove関数を使用する必要があります ：

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

作業削除機能：

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

あなたが持っている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);

ワーキングデモ

2
ebram khalil

ノックアウトサイトからの最高のソースごとに： https://knockoutjs.com/documentation/observableArrays.html

Removeメソッドdirect-self.players.remove（self.players（）[i]）;を使用できます。

0
Vishal Grover

次のようにプレーヤーの配列にビューモデルを追加する場合：

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);
0
Andrew