Question

给出以下视图模型：

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'}"，但我不认为前者应该像现在一样工作。

Answer 1

由于textarea的焦点状态主动改变渲染（将其与DOM分离），其focus / blur事件侦听器也会被分离，所以他们只是第一次工作。

来自the docs：

[...] if完全从DOM中移除元素，show切换控制元素可见性的aurelia-hide CSS类。

为了避免这种情况而不必担心（重新）绑定侦听器，使用show条件而不是if 。

通过绑定聚焦元素并不总是有效

1 个答案: