Knockout JS 如何将数据绑定到静态表单元素

Posted 2023-03-27

【中文标题】Knockout JS 如何将数据绑定到静态表单元素

【英文标题】：Knockout JS How to Data-Bind to Static Form Element

【发布时间】：2021-12-27 21:57:39

【问题描述】：

我正在尝试在 knockout.js 中对表单元素进行数据绑定。但是我不希望元素在表单中是可编辑的，甚至不希望将元素显示给用户。

我能够正确地将值绑定到输入元素。但如果我可以从 html 或标签文本或跨度中提取值，我会更喜欢。所以下面的工作，但我无法改变它，所以它不是用户可以改变的输入。

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

我尝试只使用带有占位符的隐藏元素，但这不起作用。

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

有什么建议吗？

提前感谢您的帮助。

【问题讨论】：

placeholder 属性不会对隐藏的输入执行任何操作。它只是输入字段上的一个可视占位符，它不像“默认值”或类似的东西。听起来您生成了一些服务器端，并希望在某处放置一个值以便以后在淘汰赛中使用，对吗？

@Karl-JohanSjögren 正确，我想渲染一些 HTML，比如一个值作为配置的跨度。然后，当用户提交表单时，我想将该数据与表单一起发送。但我错过了如何从不是用户输入的表单元素中提取数据。

【参考方案1】：

你正在做的工作，或者应该工作，很好：

<form>
  <input type="hidden" data-bind="value: myHiddenVal" />
</form>

function ViewModel() 
  self.myHiddenVal = ko.observable('Foo');


ko.applyBindings(new ViewModel());

这将产生：

<input type="hidden" data-bind="value: myHiddenVal" value="Foo">

示例：https://jsfiddle.net/thebluenile/myves32x/

虽然我不得不说，我当然不知道您的确切用例，但“从 HTML 元素中提取值”与 Knockout 或任何其他数据绑定框架的工作方式有点对立。如果用户不必编辑该字段，您可以将其完全排除在 UI 之外。我能想到的隐藏元素的唯一有效用例是，如果您将表单提交给服务器端脚本进行处理，而不是通过 AJAX 发送其内容。