Javascript 在foreach循环中的一行内显示/隐藏div-KnockoutJS

我尝试过几种方法，但都没有成功。我想要一些建议

目标：我有一个表，其中每一行都是一个订单，但在该行中，如果需要进行更改，下面会显示一个div（红色）。这需要在单击/切换该行上的按钮时显示/隐藏（按钮为：进行更改）

问题：除了“进行更改”切换之外，我还有其他所有按钮。尝试了visible observable，但我能得到的最接近的结果是切换整个表的div可见性，而不是每行

//类来表示表中的行
功能orderDetail（订单、订单更改）{
var self=这个；
自我秩序=可观察的（秩序）；
self.orderChange=ko.可观察（orderChange）；
}
//整体视图模型，加上初始状态
函数FoodViewModel（）{
var self=这个；
self.foodTypes=[
{foodType:“请选择”}，
{foodType:“Veg”}，
{foodType:“肉”}
];    
self.orders=ko.array([
新订单详细信息（self.foodTypes[0]，self.foodTypes[0]）
]);
//添加和删除行
self.addOrder=函数（）{
self.orders.push（新的orderDetail（self.foodTypes[0]，self.foodTypes[0]）；
}
self.removeOrder=函数（顺序）{self.orders.remove（顺序）}
}
应用绑定（新的FoodViewModel（））

命令
改变
去除
添加顺序
如果您希望用户界面对淘汰中的某些内容做出反应，请创建一个可观察的命令

在这种情况下，您希望有条件地显示部分UI（显然是为了切换编辑模式），因此让我们创建：


可观察的
editMode
，它是
true
或
false
，用于存储UI状态
一种在两种状态之间切换的功能，用于将其绑定到按钮
一个
if:editMode
和一个
ifnot:editMode
绑定，相应地显示UI的不同部分


函数OrderDetail（参数）{
var self=这个；
params=params |{}；
自序=可观测（参数序）；
self.orderChange=ko.observable（参数orderChange）；
self.editMode=ko.可观察（真）；
self.buttonOption=ko.pureComputed（函数（）{
返回self.editMode（）？“完成”：“编辑”；
});
self.toggleEditMode=函数（）{
self.editMode（！self.editMode（））；
}
}
函数医嘱列表（参数）{
var self=这个；
params=params |{}；
self.foodTypes=ko.observearray（params.foodTypes）；
self.orders=ko.observearray（）；
self.addOrder=函数（foodType）{
self.orders.push（neworderdetail（））；
}
self.removeOrder=函数（顺序）{
self.orders.remove（命令）；
}
}
var vm=新订单列表({
食物类型：[
{foodType:“Veg”}，
{foodType:“肉”}
]
});
ko.应用绑定（vm）

命令
行动
去除
添加订单