使用knockout在点击时将元素从<span>更改为<input />

Question

我正在从

的表格中更改元素类型

<span class="phoneElement" data-bind="text: Phone"></span>

到

<input type="text" data-bind="textInput:$data.Phone"/>

在按钮上单击“编辑”，这样我就可以将其编辑为用户添加新值。

但我面临的问题是：当它更改为文本框类型时，它不会保留数据绑定（旧值）或新输入的数据（新数据）。看起来数据绑定不会从span传输到Input。

Answer 1

不仅仅是＆＃34;改变＆＃34;元素标签，因为它不是真正的东西（参考答案：Use jQuery to change an HTML tag?）。简而言之，它不再是相同的元素。实现相同结果的最佳方法是通过状态属性进行控制并切换视图，如下所示：

<span class="phoneElement" data-bind="text: Phone, visible: !isEditingPhone(), click: editPhone"></span>
<input type="text" data-bind="textInput: Phone, visible: isEditingPhone, onBlur: doneEditingPhone"/>

然后，您需要实现方法来切换模型上的isEditingPhone属性。

当然，如果您在几个字段中执行此操作，最好封装此逻辑。