Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>KnockoutJS doesn't manipulate DOM this way. You could use jquery or native js document.createElement('User Details etc') and append it between users divs. The closest to this behavior in knockout is <code>IF</code> binding. Explained at the end. Still it needs to be there defined at first, and then knockout can control it.</p> <p>For knockout way you can start with visibility:</p> <pre><code>&lt;div&gt;user 1&lt;/div&gt; &lt;div data-bind="visible: selectedUser() == user1"&gt;User 1 Details etc&lt;/div&gt; &lt;div&gt;user 2&lt;/div&gt; &lt;div data-bind="visible: selectedUser() == user2"&gt;User 2 Details etc&lt;/div&gt; &lt;div&gt;user 3&lt;/div&gt; &lt;div data-bind="visible: selectedUser() == user3"&gt;User 3 Details etc&lt;/div&gt; </code></pre> <p>Or better, in the loop:</p> <pre><code>&lt;!-- ko foreach: users --&gt; &lt;div data-bind="text: $data.userName"&gt;&lt;/div&gt; &lt;div data-bind="visible: $parent.selectedUser() == $data.userName, text: $data.userDetails"&gt;&lt;/div&gt; &lt;!-- /ko --&gt; </code></pre> <p>If you want to keep those divs out of DOM, change <code>visibility</code> to <code>if</code>. From knockout website:</p> <blockquote> <p>if plays a similar role to the visible binding. The difference is that, with visible, the contained markup always remains in the DOM and always has its data-bind attributes applied - the visible binding just uses CSS to toggle the container element’s visibility. The if binding, however, physically adds or removes the contained markup in your DOM, and only applies bindings to descendants if the expression is true.</p> </blockquote> <p>You can read more in documentation: <a href="http://knockoutjs.com/documentation/if-binding.html" rel="noreferrer">http://knockoutjs.com/documentation/if-binding.html</a></p> <p>Edit: and your modified JSfiddle: <a href="http://jsfiddle.net/XwcK9/1/" rel="noreferrer">http://jsfiddle.net/XwcK9/1/</a></p>
    singulars
    1. This table or related slice is empty.
    1. POinserting a div between divs using knockout
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USWojciech Czerniak
    1. USWojciech Czerniak
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POinserting a div between divs using knockout
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload