javascript - 由于整个模板重新渲染而导致输入焦点丢失

Question

我有一个像这样的 JQuery 模板:

<div class="editor-field">
    <input data-bind="value: ValueField, valueUpdate: 'afterkeydown'" />

    {{if $data.errors && $data.errors().length > 0 }}
    <div>
        an error occured
    </div>
    {{/if}}
</div>

$data.errors 是一个从空开始的 observableArray。

我已订阅 ValueField 并将 $data.errors 设置为 [ "hello"]。但是，当更新 observableArray 时(由于输入更改)，整个模板都会刷新，导致输入失去焦点。

前后 DOM 树的唯一区别是在 if block 内添加了 div。

Answer 1

尝试使用 Knockout 无容器控制流语法(基于注释标签)，如下所示:

<div class="editor-field">
<input data-bind="value: ValueField, valueUpdate: 'afterkeydown'" />

<!-- ko if: $.isArray($data.errors()) && $data.errors().length > 0 -->
<div>
    an error occured
</div>
<!-- /ko -->