Knockout JS如何对静态表单元素做数据绑定且不让用户编辑展示

解决方案 #

场景1：仅需绑定数据、不需要向用户展示该值 #

你用hidden input的思路是可行的，不生效是因为hidden类型的input本身不支持placeholder属性，该属性对隐藏元素无任何作用，直接绑定value即可，原生表单提交时该值会被正常携带：

<input id="txtProvider" name="txtProvider" type="hidden" data-bind="value: $root.session().Resource().provider" />

如果不需要走原生表单提交，完全通过Knockout的ViewModel管理数据，你甚至可以不用写对应的DOM元素，直接操作ViewModel内的对应属性即可，无需冗余的DOM节点。

场景2：需要向用户展示该值、但不允许用户编辑 #

直接使用Knockout的text绑定，将值绑定到span、label这类普通非表单元素上即可，用户无法直接修改这类元素的文本内容：

<!-- 用span元素展示 -->
<span id="txtProvider" data-bind="text: $root.session().Resource().provider"></span>

<!-- 用label元素展示 -->
<label id="txtProvider" data-bind="text: $root.session().Resource().provider"></label>

如果同时需要表单提交携带该值，用「普通展示元素+hidden input」的组合即可，二者绑定同一个数据源，Knockout会自动完成数据同步。

如果希望用输入框样式展示但禁止编辑，也可以给input添加readonly属性：

<input id="txtProvider" name="txtProvider" type="text" readonly data-bind="value: $root.session().Resource().provider" />

内容的提问来源于stack exchange，提问作者recneps