More unobtrusive javascript code

Since HTML data attribute is W3C valid, it would be nice to see it in action with Yii/Zii widgets that uses js. So instead of calling some js at the end of the HTML , js code would be called automatically depending on data attributes. For example instead:


jQuery('#pending').yiiListView({'ajaxUpdate':['pending'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'list-view-loading','sorterClass':'sorter'});

widget would render HTML like this (and none of js):




<div id="#pending" class="list-view" data-widget="yiiListView" data-ajaxUpdate="['pending']" data-ajaxVar="ajax" data-pagerClass="pager" data-loadingClass="list-view-loading" data-sorterClass="sorter">   

.....  

</div>



jQuery plugin yiiListView would call itself (either by specific class or by data-widget attribute) with specified parameters.

This way you would not have any js code inside of HTML (which is ugly) and all custom js classes and functions could be separated from HTML and thus easier to maintain. There are numerous good things besides this like for example change widget parameters with js end etc.

Of course, this would require massive changes on Zii jquery plugins, so maybe this would be suggestion for Yii 2.0

I don’t see the point of moving all the data to the HTML… this way “again” we get to unreadable HTML code…

IMO it would be a better idea to make a way to collect all framework / custom JS code that would be rendered on the page… and render it in a dinamic JS file… so that on the page there is only the line that includes that dinamic JS file…

That would be great, but much harder to implement (almost impossible?).

Frameworks like ruby on rails solved it with data attributes (from version 3), if there were better solution I think they would have found it already

I agree with the principle of unobtrusive Javascript being in separate files where possible (although this is perhaps more a presentational obsession than a necessity), and I can see how this might be a good idea.

However - haven’t Html data attributes only been introduced with Html 5 (I haven’t researched this fully, so forgive me if I’m mistaken)? In which case, whilst it might be a nice option, it should definitely not be a default feature, since a lot of people will not be using Html5 (I’m sticking with XHtml1.1 for the moment).