如何清空一个observableArray的内容,该数组是从之前访问视图时填充的。

48
我有一个单页应用程序,使用knockout进行数据绑定。该单页应用程序中的CAApproval.html视图在viewmodel代码中有一个名为AllCertificates的observablearray。它在页面上正常显示。当您通过单页应用程序页面上的navigation.html部分中的链接导航离开视图,然后返回到CAApproval页面时,上一次访问的值仍在AllCertificates observableArray中,因此在CAApproval视图中显示。
每当用户返回到使用该observablearray的CAApproval页面时,我需要清除AllCertificates observablearray的内容,以便如果用户离开页面并返回,则observablearray的内容为null,因此屏幕上将不显示任何数据。以下是我的viewmodel代码的要点-
define(['services/logger', 'durandal/system', 'durandal/plugins/router', 'services/CertificateDataService','controls/Lucas'],

       function(logger, system, router, CertificateDataService) {
        var allCertificates = ko.observableArray([]);

    var activate = function () {
            // go get local data, if we have it
            return SelectAllCerts(),SelectMyCerts(), GetCertificateDetails(), GetDDABankNums();
            };
        var vm = {
            activate: activate,
            allCertificates: allCertificates,
    SelectAllCerts: SelectAllCerts

        });

    return vm;

    function SelectAllCerts() {
                return CertificateDataService.getallCertificates(allCertificates);
        }
    });

每当用户从另一个页面进入该页面时(仅在导航到页面内部时而不是在页面内部导航时),如何清除observablearray的内容?

4个回答

90

此外,Knockout的observableArray方法非常有趣。调用removeAll可以清除所有项目。
请查看官方网站可观察数组手册

self.mycertificates = ko.observableArray(['C1', 'C2']);  
self.mycertificates.removeAll();

44

只需在您的激活函数(每次加载视图模型时调用)中将其设置为空即可(allCertificates([])) -

function(logger, system, router, CertificateDataService) {
    var allCertificates = ko.observableArray();

var activate = function () {
    allCertificates([]);
    // go get local data, if we have it
    return SelectAllCerts(),SelectMyCerts(), GetCertificateDetails(), GetDDABankNums();
};

var vm = {
    activate: activate,
    allCertificates: allCertificates,
    SelectAllCerts: SelectAllCerts
});

1
太好了!谢谢。还在逐渐熟悉 knockout。 - Chris
哇,我已经寻找类似的答案超过两天了。非常感谢你! - Pieter VDE
1
请勿使用:这将销毁当前的可观察数组,并导致任何已引用该数组的函数查找其自动连接以进行更新和监听。 - Amb3rL4nn
使用以下解决方案:self.mycertificates.removeAll(); - Amb3rL4nn

4

对于Jeremy T(评论中没有足够的空间),第一个原因也足够让我满意,那就是所需目的的公开可用API存在。

但是要评估性能,您可以查看源代码。 "observableArray"也是带有注入对象的附加函数的"observable"。

因此,初始化看起来像这样:

ko.observableArray = function (initialValues) {
    initialValues = initialValues || [];

    if (typeof initialValues != 'object' || !('length' in initialValues))
        throw new Error("The argument passed when initializing an observable array must be an array, or null, or undefined.");

    var result = ko.observable(initialValues);
    ko.utils.extend(result, ko.observableArray['fn']);
    return result.extend({'trackArrayChanges':true});
};

ko.observable = function (initialValue) {
    var _latestValue = initialValue;

    function observable() {
        if (arguments.length > 0) {
            // Write

            // Ignore writes if the value hasn't changed
            if (!observable['equalityComparer'] || !observable['equalityComparer'](_latestValue, arguments[0])) {
                observable.valueWillMutate();
                _latestValue = arguments[0];
                if (DEBUG) observable._latestValue = _latestValue;
                observable.valueHasMutated();
            }
            return this; // Permits chained assignments
        }
        else {
            // Read
            ko.dependencyDetection.registerDependency(observable); // The caller only needs to be notified of changes if they did a "read" operation
            return _latestValue;
        }
    }
    if (DEBUG) observable._latestValue = _latestValue;
    ko.subscribable.call(observable);
    observable.peek = function() { return _latestValue };
    observable.valueHasMutated = function () { observable["notifySubscribers"](_latestValue); }
    observable.valueWillMutate = function () { observable["notifySubscribers"](_latestValue, "beforeChange"); }
    ko.utils.extend(observable, ko.observable['fn']);

    ko.exportProperty(observable, 'peek', observable.peek);
    ko.exportProperty(observable, "valueHasMutated", observable.valueHasMutated);
    ko.exportProperty(observable, "valueWillMutate", observable.valueWillMutate);

    return observable;
}

并删除所有看起来像这样的元素:

'removeAll': function (arrayOfValues) {
        // If you passed zero args, we remove everything
        if (arrayOfValues === undefined) {
            var underlyingArray = this.peek();
            var allValues = underlyingArray.slice(0);
            this.valueWillMutate();
            underlyingArray.splice(0, underlyingArray.length);
            this.valueHasMutated();
            return allValues;
        }
        // If you passed an arg, we interpret it as an array of entries to remove
        if (!arrayOfValues)
            return [];
        return this['remove'](function (value) {
            return ko.utils.arrayIndexOf(arrayOfValues, value) >= 0;
        });
    }

1

初始化一个数组变量

self.allCertificates = ko.observableArray([]) 

删除数组中的所有值

self.allCertificates.removeAll()

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接