Puppetmaster3's Blog

I write code.

  • Pages

  • Advertisements

DOM centric data binding, 3 examples

Posted by puppetmaster3 on September 22, 2013

Some front end architects work well with HTML5 designers by allowing designers to experiment and create great looking data ‘tables’ and data grids with CSS. This can only be accomplished by using DOM centric data binding as opposed to having .js emit the DOM. This way an HTML5 designer can use any CSS framework they like to build great UI.
I wrote an example for each of the 2 popular DOM centric data binding grids, ‘list js’ and ‘transparency js’.Both accomplishes that goal. Let me know if you like other DOM centric data binding libraries for data grids tables and just general data binding.

But before you run it, lets get back to designer. A designer may inject CSS using dreamweaver, or more likely a browser plugin, like ‘CSS inject’.
They can then experiment with css till they get something they like. Here is the home page of ‘CSS inject’, it lets you change style at runtime (and there are plenty of other tools).

Screen Shot 2013-09-21 at 6.26.54 PM

You can view 3 examples at runtime here -view source:

The alternative to DOM centric data binding is .js centric emits as done by MV* frameworks. Those are based on server side programing approaches, such as GWT and result in poor UI. If front end arcitects include designers in their ‘pipeline’ we can avoid web apps being ugly like Java applets.


2 Responses to “DOM centric data binding, 3 examples”

  1. […] DOM centric data binding, 2 examples « Puppetmaster3's Blog […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: