javascript - 根据条件不工作删除所有功能

Question

我使用 observableArray 编写了一个带有 Knockout 的程序，我想根据条件从该数组中删除一个元素。但它不起作用，我的程序是这样的：

 var app = function (appname, appdesc,isactive) {
            this.appname = appname;
            this.appdesc = appdesc;
            this.active = isactive;
        }
        var mainVM = function () {
            var app1 = new app('sap', 'sap b1', false);
            var app2 = new app('Magento', 'Magento 1', false);
            //this.appList = ko.observableArray();
            this.appList = ko.observableArray([app1, app2]);
        }
        var appVM = new mainVM();
        ko.applyBindings(appVM)

$('#btnDel').click(function () {

            appVM.appList.removeAll([{ "active": false }]);
        })

标签： javascriptknockout.jsknockout-3.0

Answer 1

您正在尝试removeAll通过发送参数来执行功能{'active': false}。换句话说，您要求 Knockout 确定app内部的任何实例appList是否等于 object {'active': false}。他们不平等！

这是app1：

{
   appname: 'sap',
   appdesc: 'sap b1',
   active: false
}

这是app2：

{
   appname: 'Magento',
   appdesc: 'Magento 1',
   active: false
}

您传递用于比较的参数是这样的：

{
   active: false
}

它们非常不同。

---

即使您创建 2 个具有相同输入的实例，它们也不相等。看这里：

var app = function (appname, appdesc,isactive) {
    this.appname = appname;
    this.appdesc = appdesc;
    this.active = isactive;
}

var app1 = new app('moo', 'coo', false);
var app2 = new app('moo', 'coo', false);

document.getElementById('secret').innerHTML = (app1 === app2);

is app1 equal to app2?

<br><br>

<span id="secret"></span>

---

因此，当您处理对象时，我建议的原始选项remove是适合您的功能。

var app = function (appname, appdesc,isactive) {
            this.appname = appname;
            this.appdesc = appdesc;
            this.active = isactive;
        }
        var mainVM = function () {
            var app1 = new app('sap', 'sap b1', true);
            var app2 = new app('Magento', 'Magento 1', false);
            //this.appList = ko.observableArray();
            this.appList = ko.observableArray([app1, app2]);
        }
        var appVM = new mainVM();
        ko.applyBindings(appVM)

        $('#btnDel').click(function () {

            appVM.appList.remove(function(item){
              return !item.active;
            });
        })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<!-- ko foreach: appList -->
<span data-bind="text: ko.toJSON($data)"></span>
<br>
<!-- /ko -->

<br><br>
<button id="btnDel">Delete</button>

---

removeAllwith parameters 仅在这种情况下有用，它是一种原始数据类型：

var mainVM = function () {
            
            this.appList = ko.observableArray([false, true]);
        }
        var appVM = new mainVM();
        ko.applyBindings(appVM)

        $('#btnDel').click(function () {

            appVM.appList.removeAll([false]);
        })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!-- ko foreach: appList -->
<span data-bind="text: ko.toJSON($data)"></span>
<br>
<!-- /ko -->

<br><br>
<button id="btnDel">Delete</button>