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

【问题标题】：Remove specific element from array in Knockout.JS从 Knockout.JS 中的数组中删除特定元素
【发布时间】：2013-07-11 21:46:33
【问题描述】：

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

我有这个简单的代码，但是 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');

这是http://jsfiddle.net/xseTc/

【问题讨论】：

我更新了你的两行代码检查我的答案

标签： javascript html knockout.js

【解决方案1】：

你必须使用remove function：

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

See fiddle

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

【讨论】：

不是 player.name() == Name 吗？
@karussel: ...只是因为没有人回答这个评论：这是一个“流线型”结构，单玩家属性是不可观察的。

【解决方案2】：

工作删除功能：

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

【讨论】：

【解决方案3】：

你的代码很好，除了你有 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);
}

第二次使用splice 你需要用() 调用你的可观察数组，所以你可以按如下方式使用它：

self.players.splice(i, 1);

Working Demo

【讨论】：

【解决方案4】：

如果您像这样将视图模型添加到播放器数组中：

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

然后你可以像这样删除播放器对象：

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

或者从播放器虚拟机中：

parentVM.players.remove(self);

【讨论】：

【解决方案5】：

根据淘汰网站的最佳来源：https://knockoutjs.com/documentation/observableArrays.html

你可以直接使用remove方法—— self.players.remove(self.players()[i]);

【讨论】：