Entfernen Sie ein bestimmtes Element aus dem Array in Knockout.JS

Lesezeit: 3 Minuten

Ich erstelle ein Multiplayer-Spiel über das Netzwerk, also muss ich auf Netzwerkereignisse reagieren.

Ich habe diesen einfachen Code, aber die Methode removePlayer funktioniert nicht. Der addPlayer() funktioniert gut.

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

Hier ist die http://jsfiddle.net/xseTc/

  • Ich habe 2 Zeilen Ihres Codes aktualisiert, überprüfen Sie meine Antwort

    – ebram khalil

    13. Juli 2013 um 13:08 Uhr

Benutzer-Avatar
Damien

Sie müssen die verwenden Funktion entfernen :

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

Siehe Geige

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

  • ist es nicht player.name() == Name ?

    – Karußell

    19. September 2014 um 16:11 Uhr


  • @karussel: … nur weil nicht einmal einer auf diesen Kommentar geantwortet hat: Es ist eine “stromlinienförmige” Struktur, Einzelspieler-Eigenschaften sind nicht beobachtbar.

    – Entblocker

    20. April 2016 um 15:11 Uhr

Benutzer-Avatar
Giannis

Arbeitsentfernungsfunktion:

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

Ihr Code ist in Ordnung, außer 2 Fehler, die Sie haben:

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

Zuerst führen Sie hier 2 Zeilen aus. Um sie auszuführen, müssen Sie beide verwenden {} also ersetze es durch:

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

zweite zu verwenden splice Sie müssen Ihr beobachtbares Array mit aufrufen () Sie können es also wie folgt verwenden:

self.players.splice(i, 1);

Arbeitsdemo

Wenn Sie Ansichtsmodelle wie folgt zum Array von Playern hinzufügen:

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

Dann können Sie das Player-Objekt wie folgt entfernen:

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

Oder innerhalb der Player-VM:

parentVM.players.remove(self);

Gemäß der besten Quelle von der Knockout-Site: https://knockoutjs.com/documentation/observableArrays.html

Sie können die Methode zum Entfernen direkt verwenden – self.players.remove(self.players()[i]);

1225240cookie-checkEntfernen Sie ein bestimmtes Element aus dem Array in Knockout.JS

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy