从淘汰赛观察到
问题描述:
我有下面的模型从淘汰赛观察到
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()
});
我想清楚了这里面可观察到的数据,但是当我这样做self.newItem = ""; or self.newItem('');
但去除的newitem里面所有的观测所以没有财产清算出的数据留在newItem中。我可以单独进入并清除newItem中的每个可观察对象,但有没有更好的方法来完成它。
感谢
答
没有迭代方法在淘汰赛中,你必须自己写一个。通常我会推荐使用构造函数,其中有很多选项可用于您想要的(具体实现取决于需求)。
然而,要回答你的问题“直线上升”,这里是为“清理”可观察性的所有数据中最简单的方法另一可观察到的:
function clean() {
var item = self.newItem();
for (var key in item) {
if (item.hasOwnProperty(key) && ko.isWriteableObservable(item[key])) {
item[key](null);
}
}
};
这里有一个可运行的例子:
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());
pre { font: 11px consolas; padding: 5px; background: #fafafa; border: 1px solid #ddd; }
<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>
+0
这工作..谢谢 – sp9
答
这是实现清除模型的另一个好方法。在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/>
你是问如何删除新项目的所有项目,然后放入一个空的项目,使他们能够更新? – gh9
定义“清除”。另外,描述你正在尝试实现的功能。很可能你正在尝试做一些更好的解决方法。 – Tomalak
通过清除我的意思是使newItem内的所有observables像制造商=''一样空。我把它映射到模态对话框中,所以当表单关闭时,我想清空新项目,这样映射到像制造商或itemnumber这样的数据的所有字段都变空了。 – sp9