Javascript 双向数据绑定不适用于淘汰赛

我有下面的代码，它有两个函数

单击“添加更多”，将新值推送到可观察数组，并将新文本框添加到UI

单击“保存”后，在div的文本框中显示值

var模型=函数（）{
var self=这个；
self.inventoryItems=ko.observableArray（）；
myArray=[“Value1”、“V1lue2”、“Value3”、“Value4”]；
self.inventoryItems（myArray）；
self.addItems=函数（vm）{
self.inventoryItems.push（'newitem'）；
}
self.SaveInventory=函数（数据）{
$（'#htmlBlock'）.html（myArray）；
console.log（myArray）
};
};
应用绑定（新模型（））
ul{
列表样式：无；
}
李{
边缘顶部：5px；
}
.info文本，
A.
钮扣{
边缘顶部：20px；
}





+添加更多
保存更改
在可观察数组中不需要单独引用底层数组，它只会混淆事情。使用
self.inventoryItems（）
读取值

实时查看模型外观的一个好方法是使用带有
data bind=“text:ko.toJSON（$data，null，'\t'）”的元素

为了实现双向绑定，您需要使每个值（对于输入字段）都是可观察的。通常我会为此使用一个单独的构造函数


函数可编辑字段（initialValue）{
//您希望能够具有双向绑定的每个值都需要是可观察的
this.value=ko.可观察（初始值）；
}
var模型=函数（）{
var self=这个；
self.inventoryItems=ko.observearray（[“Value1”、“V1lue2”、“Value3”、“Value4”]）。映射（函数（项）{
//通过构造函数运行每个数组值
返回新的可编辑字段（项）；
}));
self.addItems=函数（vm）{
self.inventoryItems.push（neweditablefield（'newitem'））；
}
self.SaveInventory=函数（数据）{
log（ko.toJS（self.inventoryItems））；//获取更新的数组
};
};
应用绑定（新模型（））
ul{
列表样式：无；
}
李{
边缘顶部：5px；
}
.info文本，
A.
钮扣{
边缘顶部：20px；
}





+添加更多
保存更改
在可观察数组中不需要单独引用底层数组，它只会混淆事情。使用
self.inventoryItems（）
读取值

实时查看模型外观的一个好方法是使用带有
data bind=“text:ko.toJSON（$data，null，'\t'）”的元素

为了实现双向绑定，您需要使每个值（对于输入字段）都是可观察的。通常我会为此使用一个单独的构造函数


函数可编辑字段（initialValue）{
//您希望能够具有双向绑定的每个值都需要是可观察的
this.value=ko.可观察（初始值）；
}
var模型=函数（）{
var self=这个；
self.inventoryItems=ko.observearray（[“Value1”、“V1lue2”、“Value3”、“Value4”]）。映射（函数（项）{
//通过构造函数运行每个数组值
返回新的可编辑字段（项）；
}));
self.addItems=函数（vm）{
self.inventoryItems.push（neweditablefield（'newitem'））；
}
self.SaveInventory=函数（数据）{
log（ko.toJS（self.inventoryItems））；//获取更新的数组
};
};
应用绑定（新模型（））
ul{
列表样式：无；
}
李{
边缘顶部：5px；
}
.info文本，
A.
钮扣{
边缘顶部：20px；
}





+添加更多
保存更改
@xec，您是否将$（“#htmlBlock”）称为Vew代码？这只是为了演示。有谁能解释一下哪些地方需要改进，而不是被否决？我已经提供了一个小提琴，片段和解释我的疑问？那么为什么会有反对票呢？不清楚你在问什么。按照启动时的两个步骤，工作正常。我看不出您正在努力解决的是输入字段值本身。我已经更新了我的答案。这也可能是因为你简短地发布了4个非常相似的问题succession@xec，您是否将$（'#htmlBlock'）称为Vew代码？这只是为了演示。有谁能解释一下哪些地方需要改进，而不是被否决？我已经提供了一个小提琴，片段和解释我的疑问？那么为什么会有反对票呢？不清楚你在问什么。按照启动时的两个步骤，工作正常。我看不出您正在努力解决的是输入字段值本身。我已经更新了我的答案。这也可能是因为您在短时间内连续发布了4个非常类似的问题，谢谢，但当我在文本框中编辑值并单击“保存”时，这仍然不会更新值。这是我的原始问题。非常感谢，ko.observable（初始值）；地图是任何一个刚开始使用KO的人都能看到的非常棒的指针。我还将记住不要混合UI代码（不客气：）注意
.map（）
与敲除无关，它是一个本机javascript循环。谢谢，但当我在文本框中编辑值并单击“保存”时，仍然不会更新值。这是我的原始问题。非常感谢，ko.observable（初始值）；地图是任何一个刚开始使用KO的人都能看到的非常棒的指针。我还将记住不要混合UI代码（不客气：）注意
.map（）
与敲除无关，它是一个本机javascript循环。