Knockout.js 使用knockout在div之间插入div

我正在使用knockout，我想在两个div之间插入/显示一个div。基本上我正在创建一个员工详细信息页面。将列出员工，当用户单击员工时，我希望他/她的详细信息显示在员工下方

<div>user 1</div>
<div>user 2</div>
<div>user 3</div>

点击

<div>user 1</div>
<div>User Details etc</div>
<div>user 2</div>
<div>user 3</div>

我将所选用户存储在一个可编辑属性中，该属性在单击员工时填充，并使用with绑定，我可以让用户在所有用户之后出现，但我确实希望在相关员工下出现详细信息。有什么想法吗

---

KnockoutJS不会以这种方式操作DOM。您可以使用jquery或原生js document.createElement'User Details etc'并将其附加到用户div之间。敲除中最接近此行为的是IF绑定。最后解释。但它仍然需要首先定义，然后击倒才能控制它

对于击倒方式，您可以从可见性开始：

<div>user 1</div>
<div data-bind="visible: selectedUser() == user1">User 1 Details etc</div>
<div>user 2</div>
<div data-bind="visible: selectedUser() == user2">User 2 Details etc</div>
<div>user 3</div>
<div data-bind="visible: selectedUser() == user3">User 3 Details etc</div>

或者更好，在循环中：

<!-- ko foreach: users -->
    <div data-bind="text: $data.userName"></div>
    <div data-bind="visible: $parent.selectedUser() == $data.userName, text: $data.userDetails"></div>
<!-- /ko -->

如果要将这些div排除在DOM之外，请将可见性更改为If。从淘汰赛网站：

if扮演着与可见绑定类似的角色。区别在于 在可见的情况下，包含的标记始终保留在DOM和 始终应用其数据绑定属性-仅应用可见绑定 使用CSS切换容器元素的可见性。如果有约束力， 但是，实际添加或删除DOM中包含的标记， 并且仅当表达式为true时才将绑定应用于子体

您可以在文档中阅读更多内容：

---

编辑：修改后的JSFIDLE:

KnockoutJS不会以这种方式操作DOM。您可以使用jquery或原生js document.createElement'User Details etc'并将其附加到用户div之间。敲除中最接近此行为的是IF绑定。最后解释。但它仍然需要首先定义，然后击倒才能控制它

对于击倒方式，您可以从可见性开始：

<div>user 1</div>
<div data-bind="visible: selectedUser() == user1">User 1 Details etc</div>
<div>user 2</div>
<div data-bind="visible: selectedUser() == user2">User 2 Details etc</div>
<div>user 3</div>
<div data-bind="visible: selectedUser() == user3">User 3 Details etc</div>

或者更好，在循环中：

<!-- ko foreach: users -->
    <div data-bind="text: $data.userName"></div>
    <div data-bind="visible: $parent.selectedUser() == $data.userName, text: $data.userDetails"></div>
<!-- /ko -->

如果要将这些div排除在DOM之外，请将可见性更改为If。从淘汰赛网站：

if扮演着与可见绑定类似的角色。区别在于 在可见的情况下，包含的标记始终保留在DOM和 始终应用其数据绑定属性-仅应用可见绑定 使用CSS切换容器元素的可见性。如果有约束力， 但是，实际添加或删除DOM中包含的标记， 并且仅当表达式为true时才将绑定应用于子体

您可以在文档中阅读更多内容：

编辑：和修改后的JSFIDLE: