1

I'm trying to do my own data binding code, mostly as a learning experience, and so I know exactly what is going on. Where should the relevant details for data binding be specified? I have seen two approaches.

A) Specify custom data attributes on HTML elements to indicate the binding target, attribute, element attribute that is being bound, etc. Something like this:

<input type="text" data-model="myState" data-attr="value:title" data-events="keyup" />

data-model specifies the JS object to be bound, attr is the element attribute and the object attribute, and events is what event should trigger the binding. The JS code then can automatically identify and add listeners based on those attributes.

This is an example that I originally based my code on:

https://stackblitz.com/edit/two-way-data-binding-poc

B) The other approach I have seen is to do the data binding from the JS side, and using an element ID, the listeners and attributes are specified with JS code. This means the HTML would only need an ID, and everything else is specified in the JS. If I'm understanding the code correctly, I think that this SO QA is of this type:

How to Implement DOM Data Binding in JavaScript

Both concepts (and I assume data binding in general) would need to know the object, UI element, and attributes to be bound. Is it better to do this in the UI code (A), or the JS code (B)?

Alternatively, are both A and B equally valid under different circumstances? This is for a single page application, and I intend to store as much state information on the server directly, and use JS to handle dynamic interactions.

After some additional thought, a benefit of A is that you can change the visualization of the bound state while only updating the UI code. Option B would require modifying both the UI code and JS code to add or change an element.

Brian
  • 642
  • 7
  • 18
  • 2
    I imagine this is mostly a matter of opinion and the style of coding used when developing your framework. Since this is a learning exercise in general, I would recommend you try both approaches and see how it goes. – David May 30 '19 at 13:14
  • Thanks. I've actually started the B approach already. I guess my question might be updated to be: are A and B equally valid approaches that depend on implementation? – Brian May 30 '19 at 13:15

1 Answers1

0

I've only ever seen implementation A on libraries that are HTML/CSS libraries that have some JS hook-ins.

For instance, Zurb's Foundation seems to use that for their "Sticky" plugin.

But I would use the tried-and-trusted route, and go with:

B) The other approach I have seen is to do the data binding from the JS side, and using an element ID, the listeners and attributes are specified with JS code. This means the HTML would only need an ID, and everything else is specified in the JS. If I'm understanding the code correctly...

$('#someid').val(valuehere,codehere,anything);
FeaturedSpace
  • 479
  • 3
  • 18
  • 1
    I have had limited exposure to various libraries, so I don't know what is common place. This is a helpful data point. I fiddled with WPF/C# a few years ago, and the data binding there appeared to follow the A approach, but I can't remember many details. – Brian May 30 '19 at 13:24