web-dev-qa-db-fra.com

Supprimer un élément spécifique du tableau dans Knockout.JS

Je crée un jeu multijoueur sur le réseau et je dois donc réagir aux événements du réseau. 

J'ai ce code simple, mais la méthode removePlayer ne fonctionne pas. Le addPlayer () fonctionne bien.

<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
36
RedHotScalability

Vous devez utiliser la fonction remove :

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

}

Voir violon

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

Fonction de suppression de travail:

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

votre code est correct sauf 2 erreur que vous avez:

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

tout d'abord, vous exécutez 2 lignes. Pour les exécuter, vous devez utiliser {}.

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

en second lieu à utiliser splice vous avez besoin d'appeler votre tableau observable avec () pour pouvoir l'utiliser comme suit:

self.players.splice(i, 1);

Démo de travail

2
ebram khalil

Selon la meilleure source du site Knockout: https://knockoutjs.com/documentation/observableArrays.html

Vous pouvez utiliser la méthode remove directe - Self.players.remove (self.players () [i]);

0
Vishal Grover

Si vous ajoutez des modèles de vue à la gamme de lecteurs comme ceci:

self.addPlayer = function (Name, QueuePos, Score) {
    self.players.Push(new PlayerVM(Name, QueuePos, Score)));
}

Ensuite, vous pouvez supprimer l'objet player comme ceci:

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

Ou depuis le lecteur vm:

parentVM.players.remove(self);
0
Andrew