ノックアウトデータバインド値に間違った新しい行を追加する動的

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は観測可能ですので、観測値をアンラップするバインディングに直接渡さない限り、()を使用しなければそれを読み取ることはできません。 itemNoは初期化されていないので、undefinedとして始まり、とにかくその長さを読み取ることはできません。 undefinedと空の文字列は両方とも偽であるため、observableにはifnotとifを使用できます。

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

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