敲除數據綁定值添加新行動態

Question

我的節目時不正確的：

我有數據的一個表，它是可觀察的可觀察到的陣列。

• 當退出最後一行的最後一個輸入時，它會添加一行新的空輸入。焦點在新行的第一個輸入中設置。
• 項目編號中的用戶類型;當他們標籤了它在該項目編號一些檢查，並根據它是否通過這些檢查
  1. 它繼續到下一個字段
  2. 它可以追溯到該輸入並給出了一個消息，說明無效的輸入和選擇文本。

這一切工作正常。因此，用戶通過並輸入該行中的所有有效數據，然後從最後一個輸入中跳出並添加一個新行。 但它沒有把重點放在第一個輸入，我甚至不能在那裏點擊，我假設因爲hasFocus/invalidItem變量設置爲false。我不確定如何在添加新行時將其設置爲true。

這裏是我的相關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); 
     }; 

更新

OK，我得到了我的小提琴像我的本地代碼工作現在。這裏撥動：https://jsfiddle.net/tLfezuu1/8/ 因此，當用戶從最後一個輸入中跳出時，它會添加一行新的空白輸入。用戶在第一個輸入中鍵入一個數字並點擊選項卡。它對該數字執行一些檢查，如果檢查通過，則將焦點發送到下一個輸入，或者如果檢查失敗，則將焦點發送回該輸入以突出顯示文本。

Answer 1

itemNo是可觀察的，所以如果不通過使用()就不能讀取它，除非您將observable直接傳遞給解開它的綁定。由於您未初始化itemNo，因此它以undefined開頭，無論如何您都無法讀取其長度。由於undefined和一個空字符串都是虛假的，因此只需使用ifnot和if即可。

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

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