는 항상 뷰 모델 다음 감안할 때

Question

작동하지 않습니다 바인딩을 통해 요소를 중심으로

<template> 

    <div class="expanded-input wrapper"> 
     <input focus.trigger="toggle()" /> 

     <textarea if.bind="expanded" 
        focus.bind="expanded" 
        blur.trigger="toggle()" 
        rows="4"> 
     </textarea> 
    </div> 

</template> 

동작입니다/다른 입력을 초점으로 내가 먼저/탭을 클릭하면 요소에서 textarea 요소가 나타나고 집중됩니다. 그런 다음 다른 곳을 클릭하면 텍스트 영역이 포커스를 잃게됩니다. 이제 다시 입력을 클릭하면 텍스트 영역이 나타나지만 포커스가 맞추어지지 않습니다 (입력 요소가 있음).

html 요소가 항상 처음으로뿐만 아니라 일관되게 동작해야한다는 예상/원하는 동작이 있습니다.

두 개의 메모 : if.bind expression을 삭제하면 작동합니다. if.bind을 사용하지 않고이 문제를 해결하기 위해 대신 CSS 클래스를 바인딩하여 class="${expanded ? 'show' : 'hide'}"과 같은 요소를 숨기거나 표시하도록했지만 이전처럼 작동해야한다고 생각하지 않습니다. 텍스트 영역의 포커스 상태 적극적로서

Answer 1

는 그 focus/blur 이벤트 리스너뿐만 분리되어 렌더링합니다 (DOM에서 그것을 분리) 변경, 그래서 처음에만 작동한다. the docs 가입일

:

[중 & hellip] if는 DOM에서 완전히 요소를 제거하고 show는 요소의 가시성을 제어 aurelia-hide CSS 클래스 전환.

는 대신 if의 show 조건을 사용하여, (재) 바인딩 청취자에 대해 걱정할 필요없이이 문제를 방지하려면.