Вставка div между divs с использованием нокаута

Question

Я использую нокаут, и я хочу вставить/показать div между 2 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> 

Im хранение выбранного пользователя в редактируемом имуществе, заполняется, когда клиенту нажимают на сотрудника и используя привязку с привязкой, я могу заставить пользователя выйти после всех пользователей, но мне бы очень хотелось, чтобы детали были под видом соответствующего сотрудника. Есть идеи?

Heres a link to quick fiddle ive done

Answer 1

KnockoutJS не манипулирует DOM таким образом. Вы можете использовать jquery или собственный js document.createElement («Данные пользователя и т. Д.») И добавить его между пользовательскими 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 --> 

Если вы хотите сохранить эти дивы из DOM, изменить visibility к if. С сайта нокаута:

если играет аналогичную роль с видимым связыванием. Разница равна , которая с видимым, содержащая разметка всегда остается в DOM, а всегда имеет свои атрибуты привязки данных - видимое связывание только использует CSS для переключения видимости элемента контейнера. Однако привязка if, , физически добавляет или удаляет содержащуюся разметку в вашей DOM, и применяет привязки только к потомкам, если выражение истинно.

Вы можете прочитать в документации: http://knockoutjs.com/documentation/if-binding.html

Edit: и ваш модифицированный JSfiddle: http://jsfiddle.net/XwcK9/1/