内联编辑时敲除绑定不起作用答案

【问题标题】：Knockout binding not working incase of inline editing内联编辑时敲除绑定不起作用
【发布时间】：2013-12-31 19:19:37
【问题描述】：

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

我为同一个字段创建了“跨度”和“输入”。
单击跨度时，我会隐藏跨度并“显示”“输入”。
但输入的变化并没有反映在跨度上。

我的 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

【问题讨论】：

标签： javascript jquery json knockout.js observable

【解决方案1】：

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

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

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

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

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

为了避免必须为每个属性手动创建 observable，Knockout 有一个名为“Mapping” (http://knockoutjs.com/documentation/plugins-mapping.html) 的插件，它使用以下语法：

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

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

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

【讨论】：

你能指导我怎么做吗？我是新手
有没有办法将整个 JSON 映射成 observable。
您好，我已经更新了我的代码jsfiddle.net/879Pk/4 这次如何更改总数？
刚刚更新了我的答案，以防您想知道为什么您的第二次尝试不起作用。但是，还是去映射吧，它更容易，代码也更少。
正确，因为当您更新值时，属性而不是数字变成了文本。我对其进行了一些更改，以便在计算价格时将其解析回浮动。 jsfiddle.net/879Pk/8

【解决方案2】：

您希望输入中写入的数据在 span 元素中作为文本可见吗？ $(this).find('span').html($(this).find('input').val());

【讨论】：