将数据绑定添加到表单会删除 html

Posted 2023-05-07

【中文标题】将数据绑定添加到表单会删除 html

【英文标题】：Adding with data binding to form removes html

【发布时间】：2013-08-22 06:19:25

【问题描述】：

我已经为以下问题苦苦挣扎了太久。我一直在网上搜索，但没有找到我的问题的答案。我有一个表格，我添加了一个带有数据绑定的表格。当我调用 ko.applyBindings(viewModel) 时，我没有收到任何错误，但里面的 html 被删除了。

我想要完成的是：

我生成的 HTML 没有敲除 我正在根据已知的输入 ID 动态地将敲除绑定注入到 html。 我希望能够在顶层应用绑定，这将是我的表单，而不是添加每个单独的绑定。

代码

HTML
<form data-bind="with: form1">
<select data-bind="options: propertyNames, value: selectedProperty"></select>
<input data-bind="value: currentValue" />
<input data-bind="value: currentValue002" />
<button data-bind="click: setValue">Set Value</button>
<button data-bind="click: setValue2.bind($data, 'two', 'Jon')">Set two to Jon</button></form>


ViewModel:
<div data-bind="text: ko.toJSON($root.properties)"></div>
var viewModel = 
propertyNames: ["one", "two", "three"],
form1: ko.observable(),
properties: 
   one: ko.observable("Bob"),
   two: ko.observable("Ted"),
   three: ko.observable("Ann")
,
setValue: function() 
   this.properties[this.selectedProperty()](this.currentValue());   
,
setValue2: function(propName, value) 
    this.properties[propName](value);

;
ko.applyBindings(viewModel);

你可以在这里看到它：http://jsfiddle.net/cricri99/Hk6MB/2/

我还尝试将 data-bind="submit: form1" 添加到我的表单中，然后用带有 data-bind="with: test" 的 div 包围内部 HTML，但这也不起作用。它还删除了内部 HTLM。

【问题讨论】：

我尝试添加：<!-- ko with: form1 --> <form></form> <!-- /ko --> 但这没有帮助。我想知道form1 绑定它时会有什么价值——通常情况下，你会有类似<form data-bind="with: object"> <imput data-bind="value: objectProp1" /> </form>

【参考方案1】：

请原谅这里的简洁...

我添加了form1: ko.observable(currentValue: currentValue),，它显示了表单。

但是，如果您想在根目录上使用变量，请使用：

<form data-bind="with: form1"><input data-bind="value: $root.currentValue" /></form>