Databases
StackOverflow2013
Postsdbo
POHow to Implement DOM Data Binding in JavaScript
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to Implement DOM Data Binding in JavaScript
    primarykey
    data
    text
    <p>Please treat this question as strictly educational. <strong>I'm still interested in hearing new answers and ideas to implement this</strong></p> <h3>tl;dr</h3> <p>How would I implement bi-directional data-binding with JavaScript?</p> <h3>Data Binding to the DOM</h3> <p>By data binding to the DOM I mean for example, having a JavaScript object <code>a</code> with a property <code>b</code>. Then having an <code>&lt;input&gt;</code> DOM element (for example), when the DOM element changes, <code>a</code> changes and vice versa (that is, I mean bidirectional data binding). </p> <p>Here is a diagram from AngularJS on what this looks like:</p> <p><img src="https://i.stack.imgur.com/hu1ps.png" alt="two way data binding"></p> <p>So basically I have JavaScript similar to:</p> <pre><code>var a = {b:3}; </code></pre> <p>Then an input (or other form) element like:</p> <pre><code>&lt;input type='text' value=''&gt; </code></pre> <p>I'd like the input's value to be <code>a.b</code>'s value (for example), and when the input text changes, I'd like <code>a.b</code> to change too. When <code>a.b</code> changes in JavaScript, the input changes.</p> <h3>The Question</h3> <p>What are some basic techniques to accomplish this in plain JavaScript?</p> <p>In specific, I'd like a good answer to refer to:</p> <ul> <li>How would binding work for objects?</li> <li>How listening to change in the form might work?</li> <li>Is it possible in a simple way to only have the HTML modified on the template level? I'd like to not keep track of the binding in the HTML document itself but only in JavaScript (with DOM events, and JavaScript keeping reference to the DOM elements used).</li> </ul> <h3>What have I tried?</h3> <p>I'm a big fan of Mustache so I tried using it for templating. However, I ran into issues when trying to perform the data binding itself since Mustache processes HTML as a string so after I get its result I have no reference to where the objects in my viewmodel are. The only workaround I could think for this was modifying the HTML string (or created DOM tree) itself with attributes. I don't mind using a different templating engine.</p> <p>Basically, I got a strong feeling that I was complicating the issue at hand and there is a simple solution.</p> <p><strong>Note:</strong> Please do not provide answers that use external libraries, especially ones that are thousands of lines of code. I've used (and like!) AngularJS and KnockoutJS. I really don't want answers in the form 'use framework x'. Optimally, I'd like a future reader who doesn't know how to use many frameworks to grasp how to implement bi-directional data-binding herself. I do not expect a <em>complete</em> answer, but one that gets the idea across.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USBenjamin Gruenbaum
    1. USBenjamin Gruenbaum
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to Implement DOM Data Binding in JavaScript
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow to Implement DOM Data Binding in JavaScript
      1. USBenjamin Gruenbaum
      1. VTFavorite
    3. VO
      singulars
      1. POHow to Implement DOM Data Binding in JavaScript
      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