Javascript 如何使用knockout.js为列表中的选定项动态生成编辑表单

我现在可能是个无赖，但问题是。我有一个由knockoutjs生成的用户列表。下面是我正在使用的基本代码（跳过所有不必要的细节）：

HTML代码如下所示：

<ul data-bind="foreach: users">
   <li data-bind="text: fullName"></li>
</ul>

<ul data-bind="foreach: users">
    <li data-bind="text: fullName, click: $parent.showForm"></li>
</ul>
<hr/>
<form id="form">
    <p><input data-bind="value: id"></input></p>
    <p><input data-bind="value: firstName"></input></p>
    <p><input data-bind="value: lastName"></input></p>
</form>

我在这里试图实现的是，每当单击列表项时，编辑表单就会显示预先填充的已单击用户信息。任何关于如何做到这一点的提示或窍门都会让你们超级棒。谢谢。

ko.applyBindings（）函数有一个可选的第二个参数，可用于指定要搜索数据绑定属性的元素。所以你可以做这样的东西：

<ul data-bind="foreach: users">
   <li data-bind="text: fullName"></li>
</ul>

<ul data-bind="foreach: users">
    <li data-bind="text: fullName, click: $parent.showForm"></li>
</ul>
<hr/>
<form id="form">
    <p><input data-bind="value: id"></input></p>
    <p><input data-bind="value: firstName"></input></p>
    <p><input data-bind="value: lastName"></input></p>
</form>

然后，在HrManagementViewModel中：

self.currentUser = ko.observable(null);

self.showForm = function(user, event) {
    // first argument here is the item, associated with the <li> element
    // second - the event object.

    var previousSelection = self.selectedUser();
    self.selectedUser(user); // Wrap your user viewModel in observable. To change
                             // the input fields bindings just update it 
                             // with a new viewModel and KO will do the rest.
    if (previousSelection == null) {
        var target = document.getElementById('form');
        ko.applyBindings(self.selectedUser, target); 
    }
}

self.currentUser=ko.可观察（空）；
self.showForm=函数（用户、事件）{
//这里的第一个参数是与
元素关联的项
//第二，事件对象。
var previousSelection=self.selectedUser（）；
self.selectedUser（user）；//将您的用户视图模型包装为可观察。要更改
//输入字段绑定只是更新它
//使用新的viewModel，KO将完成其余工作。
如果（上一个选择==null）{
var target=document.getElementById（'form'）；
ko.应用绑定（self.selectedUser，target）；
}
}

---

在这里，试一试：

有点问题。当您尝试编辑输入字段中的信息时，lastname/firstname将分配给所有用户，而不是一个用户。有什么想法吗？哦，是的，那是因为对同一个输入字段应用了多个绑定。我记得在应用新绑定之前使用ko.cleanNode（element）来解除元素绑定，但由于某种原因，我无法在JSFIDLE中使用它。我已经更新了我的答案，做了一些有帮助的工作。