Data binding 使用数据绑定添加到表单将删除html

我为以下问题挣扎了太久。我一直在网上搜索，还没有找到我的问题的答案。我有一个表单，我添加了一个数据绑定。当我调用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);

HTML
设定值
给乔恩下两盘
视图模型：
var viewModel={
物业名称：[“一”、“二”、“三”]，
表1:ko.可观察（），
特性：{
一：可观测（“Bob”），
第二类：可观测（“Ted”），
三：可观察（“安”）
},
setValue:function（）{
this.properties[this.selectedProperty（）]（this.currentValue（））；
},
setValue2:函数（propName、value）{
此属性为[propName]（值）；
}
};
应用绑定（视图模型）；

你可以在这里看到：

---

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

请原谅这里的简短

我添加了

form1:ko.observable（{currentValue:currentValue}），

并显示了表单

但是，如果要在根上使用变量，请使用：

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

我尝试添加：

，但这没有帮助。我想知道当您绑定它时，

form1

会有什么值——通常，您会有类似于