通過結合聚焦元件並不總是工作

考慮以下視圖模型：通過結合聚焦元件並不總是工作

export class ExpandingInput { 
    // ctor 
    constructor() { 
     this.expanded = false; 
    } 

    // actions 
    toggle() { 
     this.expanded = !this.expanded; 
    } 
}

和模板：

<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元素顯示並聚焦。然後，我點擊其他地方，這樣textarea放鬆焦點。現在當我再次點擊輸入時，textarea顯示出來但沒有被聚焦（輸入元素是）。

預期/期望的行爲應該是html元素總是表現一致，而不僅僅是第一次:)。

兩個注意事項：如果我刪除if.bind expression，它的工作原理。我繞過這個問題不使用if.bind，而是綁定css類來隱藏/顯示像這樣的元素class="${expanded ? 'show' : 'hide'}"，但我不認爲前者應該像現在這樣工作。

來源

2017-04-20 Marek M.

它可能！你能不能把這個評論作爲回答發表，以便我能接受它？另外 - 請你指點我所描述的行爲的文檔？ –

確定，發佈。您可以在答案中找到指向文檔的鏈接 –

隨着文本區域的對焦狀態積極改變渲染（從DOM分離的話），其focus/blur事件偵聽器被分離爲好，所以他們只工作的第一次。

從the docs：

[＆hellip;] if從DOM完全去除元件，和show將切換aurelia-hide CSS類，其控制元件的可見性。

爲了避免這種情況，而不必擔心（重新）結合聽衆，而不是使用if的show條件。

來源

2017-04-20 21:40:37

通過結合聚焦元件並不總是工作

回答

相關問題