0
考慮以下視圖模型:通過結合聚焦元件並不總是工作
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'}"
,但我不認爲前者應該像現在這樣工作。
它可能!你能不能把這個評論作爲回答發表,以便我能接受它?另外 - 請你指點我所描述的行爲的文檔? –
確定,發佈。您可以在答案中找到指向文檔的鏈接 –