javascript - 更新绑定(bind)到表格的 observableArray 会导致失去焦点

Question

我正在绑定(bind)一个 observableArray到生成带有 <tr> 的表的模板对于数组中的每个项目。这个想法是，当用户在最后一行输入文本时，页面会自动添加另一行；它是一个动态扩展的条目列表。

一切正常，但发生这种情况时键盘焦点会丢失。我发布了损坏的样本 in this fiddle ，其中包含以下内容:

function ingredientViewModel(name, qty, note) {
    this.name = ko.observable(name);
    this.quantity = qty;
    this.note = note;
}

var viewModel = {
    ingredients: ko.observableArray([]),
};

// When last ingredient's name changes,
//   Add a new row to the list
//   Update the global subscription to point to the new item


function lastIngredientNameChanged(newValue) {
    var currentfocus = document.activeElement;
    if (newValue != '') {
        lastIngredientSubscription.dispose();
        viewModel.ingredients.push(new ingredientViewModel('', '', ''));
        lastIngredientSubscription = viewModel.ingredients()[viewModel.ingredients().length - 1].name.subscribe(lastIngredientNameChanged);
    }
    currentfocus.focus();
}

// Set up initial entries
viewModel.ingredients.push(new ingredientViewModel('', '', ''));
var lastIngredientSubscription = viewModel.ingredients()[viewModel.ingredients().length - 1].name.subscribe(lastIngredientNameChanged);

ko.applyBindings(viewModel);

还有这个查看代码:

<script type="text/html" id="ingredientTemplate">
    < table id = "ingredienttable" > < colgroup > < col width = "200" / > < col width = "40" / > < col / > < /colgroup>
        <thead><tr>
            <td>Name</td > < td > Amount < /td>
            <td>Note</td > < /tr></thead > < tbody > {
        {
            each ingredients
        }
    } < tr class = "ingrediententry" > < td > < input class = "ingredientautocomplete"
    data - bind = "value: name, valueUpdate: 'afterkeydown'" / > < /td>
                <td><input data-bind="value: quantity" / > < /td>
                <td><input data-bind="value: note" / > < /td>
            </tr > {
        {
            /each}}
        </tbody > < /table>
</script>
<div data-bind="template: 'ingredientTemplate'"></div>

有什么想法吗？

Answer 1

问题是，当您使用 {{each}} 并且您循环的 observableArray 发生变化时，整个模板将被重新渲染。所以，您的 currentfocus 元素实际上已经消失了。

您可以做的是切换到使用模板绑定(bind)的 foreach 选项，它只会重新呈现模板中更改的行。您的 HTML 看起来像:

<script type="text/html" id="ingredientTemplate">
    <table id="ingredienttable">
        <colgroup>
            <col width="200"/>
            <col width="40"/>
            <col/>
        </colgroup>
        <thead><tr>
            <td>Name</td>
            <td>Amount</td>
            <td>Note</td>
            </tr></thead>
        <tbody data-bind="template: { name: 'rowTmpl', foreach: ingredients }">
        </tbody>
    </table>
</script>

<script id="rowTmpl" type="text/html">
    <tr class="ingrediententry">
        <td><input class="ingredientautocomplete" data-bind="value: name, valueUpdate: 'afterkeydown'" /></td>
        <td><input data-bind="value: quantity" /></td>
        <td><input data-bind="value: note" /></td>
    </tr>
</script>

<div data-bind="template: 'ingredientTemplate'"></div>

此处示例:http://jsfiddle.net/rniemeyer/T9UP6/

如果你这样做，那么你甚至不必跟踪当前的焦点，它会保持不变。