Question

我正在尝试使用knockout创建内联编辑。

我为同一个字段创建了'span'和'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

Answer 1

我相信原因是，尽管你绑定到observableArray，你的对象上的属性本身并不是可观察的，所以当属性被改变时，其他绑定元素不会被通知更改。

我已编辑过你的样本： http://jsfiddle.net/879Pk/3/

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

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

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

为了避免必须为每个属性手动创建observable，Knockout有一个名为“ Mapping ”（http://knockoutjs.com/documentation/plugins-mapping.html）的插件，它使用以下语法完成此操作：< / p>

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

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

当你添加元素时，新元素的属性是不可观察的，并且在评估price属性时你也错过了括号。

Answer 2

您希望输入中写入的数据在span元素中以文本形式显示吗？ $（本）.find（ '跨度'）的HTML（$（本）.find（ '输入'）VAL（））;

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

2 个答案: