StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
20168970
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
4
CommunityOwnedDate
CreationDate
2013-11-23T22:58:06.730
FavoriteCount
0
LastActivityDate
2015-11-19T18:41:12.657
LastEditDate
2015-11-19T18:41:12.657
LastEditorUserId
1348195
OwnerUserId
1348195
ParentId
16483560
PostTypeId
2
Score
32
ViewCount
0
LastEditorDisplayName
text
Body
<p>So, I decided to throw my own solution in the pot. Here is a <a href="http://jsfiddle.net/w4CHQ/" rel="noreferrer"><strong>working fiddle</strong></a>. Note this only runs on very modern browsers.</p> <h3>What it uses</h3> <p>This implementation is very modern - it requires a (very) modern browser and users two new technologies:</p> <ul> <li><a href="https://developer.mozilla.org/en/docs/Web/API/MutationObserver" rel="noreferrer"><code>MutationObserver</code>s</a> to detect changes in the dom (event listeners are used as well)</li> <li><a href="http://addyosmani.com/blog/the-future-of-data-binding-is-object-observe/" rel="noreferrer"><code>Object.observe</code></a> to detect changes in the object and notifying the dom. <em>Danger, since this answer has been written O.o has been discussed and decided against by the ECMAScript TC, consider a polyfill</em>.</li> </ul> <h3>How it works</h3> <ul> <li>On the element, put a <code>domAttribute:objAttribute</code> mapping - for example <code>bind='textContent:name'</code></li> <li>Read that in the dataBind function. Observe changes to both the element and the object. </li> <li>When a change occurs - update the relevant element.</li> </ul> <h3>The solution</h3> <p>Here is the <code>dataBind</code> function, note it's just 20 lines of code and could be shorter:</p> <pre><code>function dataBind(domElement, obj) { var bind = domElement.getAttribute("bind").split(":"); var domAttr = bind[0].trim(); // the attribute on the DOM element var itemAttr = bind[1].trim(); // the attribute the object // when the object changes - update the DOM Object.observe(obj, function (change) { domElement[domAttr] = obj[itemAttr]; }); // when the dom changes - update the object new MutationObserver(updateObj).observe(domElement, { attributes: true, childList: true, characterData: true }); domElement.addEventListener("keyup", updateObj); domElement.addEventListener("click",updateObj); function updateObj(){ obj[itemAttr] = domElement[domAttr]; } // start the cycle by taking the attribute from the object and updating it. domElement[domAttr] = obj[itemAttr]; } </code></pre> <p>Here is some usage:</p> <p>HTML: </p> <pre><code><div id='projection' bind='textContent:name'></div> <input type='text' id='textView' bind='value:name' /> </code></pre> <p>JavaScript: </p> <pre><code>var obj = { name: "Benjamin" }; var el = document.getElementById("textView"); dataBind(el, obj); var field = document.getElementById("projection"); dataBind(field,obj); </code></pre> <p>Here is a <a href="http://jsfiddle.net/w4CHQ/" rel="noreferrer"><strong>working fiddle</strong></a>. Note that this solution is pretty generic. Object.observe and mutation observer shimming is available.</p>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POHow to Implement DOM Data Binding in JavaScript
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. USBenjamin Gruenbaum
UserOwnerUserId
1. USBenjamin Gruenbaum
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
2. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
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.