从Knockout.JS中的数组中删除特定元素

I am creating a multiplayer game over network so I have to react on network events.

我正在通过网络创建一个多人游戏，所以我必须对网络事件做出反应。

I have this simple code, but the removePlayer method doesnt work. The addPlayer() works fine.

我有这个简单的代码，但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/

继承人http://jsfiddle.net/xseTc/

3 个解决方案

#1

You have to use the remove function :

你必须使用删除功能：

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

}

See fiddle

看小提琴

html

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

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

#2

Working remove function:

工作删除功能：

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

#3

your code is fine except 2 error you have:

你的代码很好，除了你有2个错误：

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

first here you are executing 2 lines so to execute them both you need to use {} so replace it with:

首先，你执行2行所以要执行它们你需要使用{}所以用以下代码替换它：

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

second to use splice you done need to call your observable array with () so you to use it as following :

第二个使用splice你需要用（）调用你的observable数组，所以你可以使用它如下：

self.players.splice(i, 1);

Working Demo

工作演示

#1