【问题标题】:How to Clear Contents of an observableArray That was Populated from Previous Visits to a View如何清除从以前访问视图中填充的 observableArray 的内容
【发布时间】:2013-09-09 09:59:54
【问题描述】:

我有一个使用敲除进行数据绑定的单页应用程序。我的单页应用程序中的 CAApproval.html 视图在视图模型代码中有一个名为 AllCertificates 的可观察数组。它在页面上很好地填充。当您通过单击页面的 navigation.html 部分中的链接离开视图并返回到 CAApproval 页面时,先前访问的值仍在 AllCertificates observableArray 中,因此显示在 CAApproval 视图中。

每次用户返回到使用该 observablearray 的 CAApproval 页面时,我都需要清除 AllCertificates observablearray 的内容,这样如果用户离开页面并返回,则 observablearray 的内容为空,因此没有数据显示在屏幕上。这是我的视图模型代码的亮点-

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 的内容(在页面本身内导航时不清除,仅在用户来自单独页面时清除 observablearray)?

【问题讨论】:

    标签: knockout.js knockout-2.0 single-page-application


    【解决方案1】:

    还淘汰observableArray 有有趣的方法。拨打removeAll清除所有项目。
    看官网observable array manual.

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

    【讨论】:

      【解决方案2】:

      只需在您的激活函数中将其设置为无 (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
      });
      

      【讨论】:

      • 完美!谢谢。还是习惯了淘汰赛。
      • 哇。我一直在寻找类似的答案超过 2 天了。非常感谢您!
      • 请勿使用:这将破坏当前的可观察数组,并导致任何已经引用该数组的函数查看其自动魔术连接以进行更新和侦听
      • 使用以下解决方案:self.mycertificates.removeAll();
      【解决方案3】:

      给 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;
              });
          }
      

      【讨论】:

        【解决方案4】:

        初始化数组变量

        self.allCertificates = ko.observableArray([]) 
        

        删除数组的所有值

        self.allCertificates.removeAll()
        

        【讨论】:

          猜你喜欢
          • 2012-04-14
          • 1970-01-01
          • 2013-05-05
          • 2019-05-07
          • 1970-01-01
          • 1970-01-01
          • 2016-10-17
          • 1970-01-01
          • 2015-05-10
          相关资源
          最近更新 更多