焦點輸入動態添加到observableArray在淘汰賽

Question

在KO 3.0.0.beta（和我幾乎可以肯定這會是相同的2.3）我想新行添加到動態創建的表：

HTML

<div id="root"> 
    <table> 
     <tbody data-bind="foreach: events"> 
      <tr> 
       <td> 
        <input type="text" data-type="name" data-bind="value: name, css: {hidden: !editing()}, hasFocus: true"> 
       </td> 
       <td> 
        <input type="text" data-type="method" data-bind="value: age, css: {hidden: !editing()}"> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

的JavaScript

var $root = $('#root'); 

$root.on('blur', 'table input', function(event) { 
    var data = ko.dataFor(event.target), 
     context = ko.contextFor(event.target), 
     $input = $(event.target), 
     newData; 

    data.editing(false); 

    if($input.closest('td').is(':last-child') && $input.closest('tr').is(':last-child')) { 
     newData = { 
      name: '', 
      age: '', 
      editing: ko.observable(false) 
     }; 

     context.$root.events.push(newData); 
     newData.editing(true); 
    } 
}); 

var data = {     
    events: [ 
     {name: 'aaa', age: '22', editing: false}, 
     {name: 'bbb', age: '33', editing: false}, 
     {name: 'ccc', age: '44', editing: false} 
    ] 
}; 

var mapping = { 
    events: { 
     key: function(data) { 
      return ko.unwrap(data.name); 
     } 
    } 
}; 

var observable = ko.mapping.fromJS(data, mapping); 

ko.applyBindings(observable, $root[0]); 

JSFiddle

and it 差不多的作品。

我成功地創建了行 - 這是siple部分，但對於我的生活，我無法使創建的raw中的第一個輸入被聚焦。

任何想法（和我經歷了很多建議，其中沒有任何工作在上述設置）？

Answer 1

我可能會錯過這一點，但爲什麼不直接將hasFocus設置爲editing（）而不是true？

<div id="root"> 
    <table> 
     <tbody data-bind="foreach: events"> 
      <tr> 
       <td> 
        <input type="text" data-type="name" data-bind="value: name, css: {hidden: !editing()}, hasFocus: editing()"> 
       </td> 
       <td> 
        <input type="text" data-type="method" data-bind="value: age, css: {hidden: !editing()}"> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

小提琴here

Answer 2

經常支付的，以避免與淘汰賽這樣的混合jQuery的。對於大多數情況，Knockout也有選項。在你的情況下，要看的是the event binding和the hasFocus binding。

看你的代碼，我會更新這樣的查看到的東西：

<tr> 
    <td> 
     <input type="text" data-bind="value: name, 
             hasFocus: editingName"> 
    </td> 
    <td> 
     <input type="text" data-bind="value: age, 
             hasFocus: editingAge, 
             event: { blur: $root.onBlurAgeEdit }"> 
    </td> 
</tr> 

順便說一句，如果你是後的新行「的MS Word風格」的創作，當用戶按下標籤，你也可以綁定到「按鍵」事件並檢查正確的鍵碼（對於標籤）。

請注意，我已經在兩個觀察值中分割了editing可觀察值：editingName和editingAge。

功能onBlurAgeEdit會在年齡input變模糊時觸發。它看起來像這樣：

self.onBlurAgeEdit = function (item) { 
    // Unwrap the array 
    var myEvents = self.events(); 

    // Check if this function was called for the *last* item in the array 
    if (myEvents[myEvents.length-1] === item) { 

     // Make sure the last item isn't in edit mode anymore 
     item.editingAge(false); 

     // Push a new item that has *name* in edit mode 
     self.events.push({name: ko.observable(''), 
          age: ko.observable(''), 
          editingName: ko.observable(true), 
          editingAge: ko.observable(false)}); 
    } 
}; 

注意，對於Firefox you'll need to throttle的觀測，使hasFocus結合發揮好。

在this fiddle的工作中查看這一切。