Question

我有以下型号

self.newItem = ko.observable({
    manufacturer: ko.observable(),
    itemnumber: ko.observable(),
    itemDescription: ko.observable(),
    priceclass: ko.observable(),
    currentPrice: ko.computed(function () {
        return "1.22";
    }, this),
    aeAuthority: ko.computed(function () {
        return "1.02PC";
    }, this),
    requestedMinimumQuantity: ko.computed(function () {
        return "!.22 PC";
    }, this),
    RequestedPrice: ko.observable(),
    ExpirationDate: ko.observable(),       
    ItemDetails: ko.observable(),
    Margin: ko.observable(),
    Status: ko.observable()

});

我想清除这个observable中的数据，但是当我执行self.newItem = ""; or self.newItem('');但删除了newItem中的所有observable时，newItem中没有任何属性。我可以进入内部并单独清除newItem中的每个observable，但有更好的方法。

由于

Answer 1

在Knockout中没有迭代方法，你必须自己编写一个。通常我建议使用构造函数，其中有大量选项可用于您想要的（具体实现取决于要求）。

然而，要回答你的问题＆＃34;直接上升，这是＃34;清理＆＃34;最简单的方法。可观察属性中的所有数据在另一个可观察对象中：

function clean() {
  var item = self.newItem();
  for (var key in item) {
    if (item.hasOwnProperty(key) && ko.isWriteableObservable(item[key])) {
      item[key](null);
    }
  }
};

这是一个可运行的例子：

＆＃13;

function ViewModel() {
  var self = this;
  
  self.newItem = ko.observable({
    manufacturer: ko.observable("Some manufacturer"),
    itemnumber: ko.observable("12345"),
    itemDescription: ko.observable("A nice item"),
    priceclass: ko.observable("High"),
    currentPrice: ko.computed(function () {
        return "1.22";
    }, this),
    aeAuthority: ko.computed(function () {
        return "1.02PC";
    }, this),
    requestedMinimumQuantity: ko.computed(function () {
        return "!.22 PC";
    }, this),
    RequestedPrice: ko.observable(1.25),
    ExpirationDate: ko.observable(new Date()),       
    ItemDetails: ko.observable("Comes with a thingie"),
    Margin: ko.observable(0.25),
    Status: ko.observable("Available")
  });
  
  self.clean = function() {
    var item = self.newItem();
    for (var key in item) {
      if (item.hasOwnProperty(key) && ko.isWriteableObservable(item[key])) {
        item[key](null);
      }
    }
  };
}

ko.applyBindings(new ViewModel());

＆＃13;

pre { font: 11px consolas; padding: 5px; background: #fafafa; border: 1px solid #ddd; }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<button data-bind="click: clean">clean out everything</button>
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

＆＃13;

Answer 2

这是实现清除模型的另一种好方法。在ko.simpleMap的帮助下，您可以使用默认值为viewModel中的现有模型指定新值。它使用Array function some。您还可以在从服务器获取数据然后将值应用于现有viewModel的方案中使用此方法。您还可以将ko.simpleMap用作JS对象source。

(function(){
    ko.simpleMap = function(source, target, excludedFields){
        excludedFields = excludedFields || [];

        for(var key in source){
            if(!source.hasOwnProperty(key) || key[0] === "_" || excludedFields.some(function(excludedField) {
                return excludedField.toLowerCase() === key.toLowerCase();
            }))
                continue;
            var targetKey;
            if(!Object.getOwnPropertyNames(target).some(function(tempKey) {
                if(tempKey.toLowerCase() === key.toLowerCase()){
                    targetKey = tempKey;
                    return true;
                }

                return false;
            }))
                continue;

            var sourceValue;

            if(typeof source[key] === "function")
                sourceValue = source[key]();
            else
                sourceValue = source[key];

            if(typeof target[targetKey] === "function"){
                if(ko.isWriteableObservable(target[targetKey]))
                    target[targetKey](sourceValue);
            } else
                target[targetKey] = sourceValue;
        }

        return target;
    };

})();

function MyModel(){
    this.manufacturer= ko.observable();
    this.itemnumber= ko.observable();
    this.itemDescription= ko.observable();
    this.priceclass= ko.observable();
    this.currentPrice= ko.computed(function () {
        return "1.22";
    }, this);
    this.aeAuthority= ko.computed(function () {
        return "1.02PC";
    }, this);
    this.requestedMinimumQuantity= ko.computed(function () {
        return "!.22 PC";
    }, this);
    this.RequestedPrice= ko.observable();
    this.ExpirationDate= ko.observable();       
    this.ItemDetails= ko.observable();
    this.Margin= ko.observable();
    this.Status= ko.observable("Approved");

}

var viewModel = {
  item: new MyModel(),
  clear: function(){
    ko.simpleMap(new MyModel(), this.item);
  }
};

ko.applyBindings(viewModel);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<input data-bind="value: item.manufacturer" type="text" /><span data-bind="text: item.manufacturer"></span><br/>
<input data-bind="value: item.itemnumber" type="text" /><span data-bind="text: item.itemnumber"></span><br/>
<input data-bind="value: item.itemDescription" type="text" /><span data-bind="text: item.itemDescription"></span><br/>
<input data-bind="value: item.priceclass" type="text" /><span data-bind="text: item.priceclass"></span><br/>
<span data-bind="text: item.currentPrice"></span><br/>
<span data-bind="text: item.aeAuthority"></span><br/>
<span data-bind="text: item.requestedMinimumQuantity"></span><br/>
<input data-bind="value: item.RequestedPrice" type="text" /><span data-bind="text: item.RequestedPrice"></span><br/>
<input data-bind="value: item.ExpirationDate" type="text" /><span data-bind="text: item.ExpirationDate"></span><br/>
<input data-bind="value: item.ItemDetails" type="text" /><span data-bind="text: item.ItemDetails"></span><br/>
<input data-bind="value: item.Margin" type="text" /><span data-bind="text: item.Margin"></span><br/>
<input data-bind="value: item.Status" type="text" /><span data-bind="text: item.Status"></span><br/>
<button data-bind="click:clear">Clear</button><br/>

从挖掘可观察的

2 个答案: