动态添加新行时，敲除数据绑定值不正确

Question

我的程序：

我有一个数据表，它是一个可观测的可观测数组。

• 当切换出最后一行的最后一个输入时，它会添加一行新的空输入。焦点设置在新行的第一个输入中
• 用户键入项目编号；当他们结账时，它会根据商品编号和是否通过这些检查进行一些检查
  1. 进入下一个字段
  2. 它返回到该输入，并给出一条声明无效输入的消息，然后选择文本

一切都很好。因此，用户遍历并输入该行中的所有有效数据，然后从最后一个输入中跳出来，添加一个新行但它没有将焦点设置为第一个输入，我甚至无法点击其中，我认为是因为hasFocus/invalidItem变量设置为false。我不知道在添加新行时如何将其设置为真。

这是我的相关HTML:

<tbody data-bind="foreach: items">        
<tr>
<td>
<div data-bind="if: (itemNo.length < 1)"><input data-bind="value: itemNo, hasFocus: $parent.invalidItem, selected: $parent.invalidItem, event: { blur: $parent.checkItemNo }, attr: { name: 'brochureitems[' + $index() + '].itemNo', id: 'brochureItems_' + $index() + '__itemNo' }, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control item-id" /></div>

这是我的相关淘汰赛：

var itemModel = function (data) {
var self = this;
self.itemNo = ko.observable(data ? data.itemNo : undefined).extend( {
required: {
params: true,
message: "Item no. required."
}
});
self.brocCode = ko.observable(data ? data.brocCode : undefined).extend( {
required: {
params: true,
message: "Bro code required."
}
});
self.itemDesc = ko.observable(data ? data.itemDesc : undefined).extend( {
required: {
params: true,
message: "Item desc required."
}
});
self.retail = ko.observable(data ? data.retail : undefined).extend( {
required: {
params: true,
message: "Retail required."
}
});
self.prizeNum = ko.observable(data ? data.prizeNum : undefined).extend( {
required: {
params: true,
message: "Prize num required."
}
});
self.itemOrder = ko.observable(data ? data.itemOrder : undefined).extend( {
required: {
params: true,
message: "Item order required."
}
});
}
var itemsModel = function(items) {
var self = this;
self.items = ko.observableArray(items);
self.invalidItem = ko.observable(true);
console.log("focus has been set");
self.checkItemNo = function(data) {
console.log("lost focus - " + self.invalidItem());
var itemNo = $.trim(data.itemNo());
if (itemNo != "") {
var item = "";
$.each(window.listOfItems, function(i, v) {
if (v.No.search(itemNo) != -1) {
item = v.Description;
return;
}
});
if(item != "") {
var match = ko.utils.arrayFirst(self.items(), function(newItem) {
return itemNo === newItem.itemNo;
});
console.log("match: " + match);
if (!match) {
data.itemDesc(item);
} else { // item already entered
setTimeout(function() { self.invalidItem(true); }, 1);
slideDownMsg("Item already entered.");
slideUpMsg(3000);
}
} else { // invalid item #
setTimeout(function() { self.invalidItem(true); }, 1);
slideDownMsg("Invalid item number.");
slideUpMsg(3000);
}
}
}        
self.submit = function() {
//self.showErrors(true);
if (viewModel.errors().length === 0) {
console.log('Thank you.');
$("#brochureForm").submit();
}
else {
console.log('Please check your submission.');
viewModel.errors.showAllMessages();
$(".input-validation-error").first().focus();
}
}
self.addLine = function() {
self.invalidItem(true);
console.log(self.invalidItem());
self.items.push( new itemModel() );
//setTimeout(function() { self.invalidItem(true); }, 1);
};

更新

好吧，我现在可以像本地代码一样工作了。Fiddle here：https://jsfiddle.net/tLfezuu1/8/因此，当用户调出最后一个输入时，它会添加一行新的空白输入。用户在第一个输入中键入一个数字并点击选项卡。它对该数字进行一些检查，如果检查通过，则将焦点发送到下一个输入；如果检查失败，则将重点发送回该输入，突出显示文本。

Answer 1

itemNo是一个可观察对象，因此如果不使用()，就无法读取它，除非您将可观察对象直接传递给打开它的绑定。由于您没有初始化itemNo，它从undefined开始，而且无论如何都无法读取其长度。由于undefined和空字符串都是伪造的，所以您可以将ifnot和if与observable一起使用。

<div data-bind="ifnot: itemNo">...</div>
<div data-bind="if: itemNo">...</div>

https://jsfiddle.net/rwa03vrb/15/