클릭 후 Knockout.js 입력 포커스

Question

클릭 이벤트가 발생한 후 녹아웃으로 입력에 포커스를 설정하려고하지만 DOM과 결합하지 않고이를 처리 할 수있는 확실한 방법을 찾을 수 없습니다. 여기에 JS 코드 나는이된다

여기

<input type="text" data-bind="value: text" /> 
<a href="#" data-bind="click: addItem">Send</a> 

<ul data-bind="foreach: items"> 
    <li data-bind="text: $data"></li> 
</ul> 

가 JsFiddle의 샘플입니다 :

(function() { 

    var vm = { 
     text: ko.observable(), 
     items: ko.observableArray([]) 
    } 

    vm.addItem = function() { 
     vm.items.push(vm.text()); 
     vm.text(null); 
    } 

    ko.applyBindings(vm); 

}()); 

이

내 DOM이다 나는 그것이 이후의 입력에 포커스를 설정하려면 무엇 http://jsfiddle.net/srJUa/1/

vm.addItem이 완료되었습니다. 예를 들어 커스텀 녹아웃 바인딩을 사용하여 어떻게 이것이 깔끔하게 이루어질 수 있는지 생각해보십시오.

Answer 1

녹아웃에는 포커스를 조작하기위한 바인딩이 내장되어 있습니다 (The "hasfocus" binding).

뷰 모델에 부울 속성을 만들고 입력에 바인드하면됩니다. 입력을 집중하려면 true으로 설정하십시오.

또는 귀하의 경우에 당신은 당신의 text 속성에 직접 바인딩, 그래서 그것이해야 텍스트가없는 경우에는 초점이 할 수

<input type="text" data-bind="value: text, hasfocus: !text()" /> 

데모 JSFiddle합니다.

Answer 2

OK, I 바인딩 hasfocus을 활용하여 문제를 해결 한 :

(function() { 

    var vm = { 
     text: ko.observable(), 
     items: ko.observableArray([]), 
     isFocused: ko.observable() 
    } 

    vm.addItem = function() { 
     vm.items.push(vm.text()); 
     vm.text(null); 
     vm.isFocused(true); 
    } 

    ko.applyBindings(vm); 

}()); 

HTML :

<input type="text" data-bind="value: text, hasfocus: isFocused" /> 
<a href="#" data-bind="click: addItem">Send</a> 

<ul data-bind="foreach: items"> 
    <li data-bind="text: $data"></li> 
</ul> 

근무 샘플 : http://jsfiddle.net/srJUa/2/

이 최선의 방법입니다 확실하지, 그래도.