動的に追加された行のknockoutjs hasfocus実装

Question

私はKOで観測可能なオブザーバブルであるデータの表を持っています。最後の行の最後の入力からタブアウトすると、新しいデータを入力できるように入力行が追加されます。最初は最初の入力にフォーカスを置くことになっています。その入力がぼやけると、いくつかのチェックが実行されます。これらのチェックのいずれかが失敗した場合は、（現在動作している）メッセージを表示し、その入力にフォーカスを戻したいと思います。私はその焦点を取り戻す方法を理解できません。ここで

は、関連するHTMLスニペットです：

<tbody data-bind="foreach: items"> 

    <tr> 
     <td> 
      <div data-bind="if: (itemNo.length < 1)"><input data-bind="value: itemNo, hasFocus: $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 itemsModel = function(items) { 
    var self = this; 
    self.items = ko.observableArray(items); 

    self.invalidItem = ko.observable(true); 

    self.checkItemNo = function(data) { 
     self.invalidItem(false); 
     console.log(data); 
     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(item) { 
        return itemNo === item.itemNo; 
       }); 

       if (!match) { 
        data.itemDesc(item); 
       } 
      } else { // invalid item # 
       slideDownMsg("Invalid item number."); 
       slideUpMsg(3000); 
       self.invalidItem(true); 
      } 
     } 
    } 



    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.items.push(new itemModel()); 
    }; 

    self.insertLine = function(index) { 
     self.items.splice(index, 0, new itemModel()); 
    }; 

    self.removeItem = function(item) { 
     self.items.remove(item); 
    }; 

    self.errors = ko.validation.group(self.items, { deep: true, live: true }); 

    self.validate = function() { 
     self.errors.showAllMessages(); 
    }   
}; 

はもちろん、私は多くのコードを残し、うまくいけば、これは私を表示するのに十分です問題。

Answer 1

setTimeout(function() { self.invalidItem(true); }, 1); 

使用setTimeouthttps://stackoverflow.com/a/4186003/1287183

を参照してください。また、あなたはcheckItemNoでself.invalidItem(false);を取り出すことができます。