javascript - 通过绑定(bind)聚焦元素并不总是有效

Question

给定以下 View 模型:

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>

行为是，当我第一次单击/跳入/以其他方式聚焦输入元素时，文本区域元素会显示并聚焦。然后我单击其他地方，以便文本区域失去焦点。现在，当我再次单击输入时，文本区域会显示，但未聚焦(输入元素是)。

预期/期望的行为是 html 元素始终表现一致，而不仅仅是第一次:)。

两个注意事项:如果我删除 if.bind 表达式，它就会起作用。我通过不使用 if.bind 而是将 css 类绑定(bind)到隐藏/显示元素来解决这个问题，例如 class="${expanded ? 'show' : 'hide'}" 但我认为前者不应该像现在这样工作。

Answer 1

当文本区域的焦点状态主动改变渲染(将其与 DOM 分离)时，其 focus/blur 事件监听器将分离为好吧，所以它们只在第一次起作用。

来自the docs :

[…] if removes the element entirely from the DOM, and show toggles the aurelia-hide CSS class which controls the element's visibility.

为了避免这种情况，而不必担心(重新)绑定(bind)监听器，请使用 show 条件而不是 if。