更新绑定到表格的observableArray会导致焦点丢失

如何解决更新绑定到表格的observableArray会导致焦点丢失

|| 我将一个“ 0”绑定到一个模板，该模板为数组中的每个项目生成一个带有“ 1”的表。这样的想法是，当用户在最后一行输入文本时，页面会自动添加另一行；这是一个动态扩展的条目列表。一切正常，但是发生这种情况时键盘焦点会丢失。我在这个小提琴中张贴了破碎的样本，其中包含以下内容：

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>

有任何想法吗？

解决方法

问题是，当您使用{{each}}和要在更改中循环播放的observableArray时，整个模板都将重新呈现。因此，您的currentfocus元素实际上消失了。您可以做的就是切换到使用模板绑定的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/ 如果您采用这种方式，那么您甚至不必跟踪当前焦点，它就会保持不变。