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

时间:2016-02-09 04:16:17

标签: jquery html knockout.js

我正在从

的表格中更改元素类型
<span class="phoneElement" data-bind="text: Phone"></span>

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

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

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

1 个答案:

答案 0 :(得分:3)

不仅仅是&#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属性。

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