1

ノックアウトを使用していて、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>

選択したユーザーを、従業員がクリックされたときに入力される編集可能なプロパティに保存し、 with バインディングを使用して、すべてのユーザーの後にユーザーを表示させることができますが、関連する下に詳細を表示したいと思います従業員。何か案は？

Heres a link to quick fiddle ive done

4

1 に答える 1

5

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 から除外したい場合は、に変更visibilityしifます。ノックアウトのウェブサイトより:

if は、目に見えるバインディングと同様の役割を果たします。違いは、visible の場合、含まれるマークアップは常に DOM に残り、常にそのデータ バインド属性が適用されることです。visible バインディングは、CSS を使用してコンテナー要素の可視性を切り替えるだけです。ただし、if バインディングは、DOM に含まれるマークアップを物理的に追加または削除し、式が true の場合にのみバインディングを子孫に適用します。

ドキュメントで詳細を読むことができます: http://knockoutjs.com/documentation/if-binding.html

編集: および変更した JSfiddle: http://jsfiddle.net/XwcK9/1/

于 2013-07-25T10:33:02.490 に答える