在内联编辑的情况下，Knockout绑定不起作用

Knockout binding not working incase of inline editing

本文关键字：Knockout 绑定 不起作用 情况下 编辑      更新时间：2023-09-26

我试图创建一个带有淘汰的内联编辑。

  • 我为同一个字段创建了"span"answers"input"
  • 单击跨度时，我隐藏跨度并"显示"输入"
  • 但输入的变化并不是跨度的反映

我的Html字段

<td>
    <span data-bind="text: name" style="display: inline;">Furious Lizard</span> 
    <input data-bind="value: name" style="display: none;" type="text">
</td>

我的内联代码

$('td').on('click', function () {
    var spanElement = $(this).find('span');
    $(this).find('span').hide();
    $(this).find('input').show().select().on('blur', function () {
        $(this).hide();
        spanElement.show();
    });
});

为什么绑定不起作用？

JSFiddle

我认为原因是，即使您绑定到observableArray，对象上的属性本身也是不可观察的，因此当属性更改时，其他绑定元素不会收到更改通知。

我已经编辑了您的样本：http://jsfiddle.net/879Pk/3/

在那里，你可以看到数据中的第一个元素，而不仅仅是标准属性，它们也是可观察的：

{
    name: ko.observable("Well-Travelled Kitten"),
    model: ko.observable(352),
    price: 75.95
}

注意：我没有修改价格，因为你在下面使用它进行计算。为了实现这一点，你必须将所有价格修改为可观察的，然后在计算时实际调用可观察的（使用括号）以获得实际值

为了避免为每个属性手动创建可观测值，Knockout有一个名为"Mapping"的插件(http://knockoutjs.com/documentation/plugins-mapping.html)它正是这样做的，使用以下语法：

var viewModel = ko.mapping.fromJS(data);

现在，关于您的第二个JSFiddle，我刚刚做了一些更正：http://jsfiddle.net/879Pk/5/

当您添加元素时，新元素上的属性是不可观察的，并且在评估价格属性时也缺少括号。

是否希望输入中写入的数据在span元素中以文本形式可见？$（this）.fund（'span'）.html（$（this）.find（'input'）.val（））；

相关文章：