使用knockout在div之间插入div

Question

我使用淘汰赛,我想插入/显示2 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>

我将所选用户存储在一个可编辑的属性中,当点击员工并使用带有绑定时填充该属性我可以让用户在所有用户之后出现,但我真的希望得到相关的详细信息.雇员.有任何想法吗？

这是一个快速小提琴的链接

Answer 1

KnockoutJS不会以这种方式操纵DOM.您可以使用jquery或native 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之外,请visibility改为if.来自淘汰赛网站:

如果扮演与可见绑定类似的角色.不同之处在于,通过可见,包含的标记始终保留在DOM中并始终应用其数据绑定属性 - 可见绑定仅使用CSS来切换容器元素的可见性.但是,if绑定在物理上添加或删除DOM中包含的标记,并且仅在表达式为true时才对后代应用绑定.

您可以在文档中阅读更多内容:http://knockoutjs.com/documentation/if-binding.html

编辑:和你修改过的JSfiddle:http://jsfiddle.net/XwcK9/1/