{"id":1309,"date":"2016-12-22T14:16:36","date_gmt":"2016-12-22T14:16:36","guid":{"rendered":"https:\/\/solutionstreet.com\/blog\/?p=1309"},"modified":"2016-12-22T14:16:36","modified_gmt":"2016-12-22T14:16:36","slug":"faster-unobtrusive-javascript-with-data-attributes","status":"publish","type":"post","link":"https:\/\/www.solutionstreet.com\/blog\/2016\/12\/22\/faster-unobtrusive-javascript-with-data-attributes\/","title":{"rendered":"Faster Unobtrusive JavaScript with Data Attributes"},"content":{"rendered":"

\"decembertitle\"<\/a><\/p>\n

Many developers have jumped on the bandwagon of full JavaScript user interfaces and moved all presentation logic from the server side to a client-side framework like React.js or Angular.js. While this may sound like fun, there are millions of applications out there in the world that use server-side rendering of HTML and JavaScript. This article is for these folks and how they can use data attributes to make their code a little cleaner.<\/p>\n

 <\/p>\n

For years, developers have used JavaScript to enhance their web pages and make them more usable. In many server-side scripting frameworks such as .jsp, .asp, Ruby on Rails(.erb), Python\/Django, and PHP, developers use these scripting frameworks to inject inline dynamic JavaScript into the pages. This JavaScript can be customized for the use case while the page is being built, making it easy to build custom logic on the fly. This can make your pages faster and more interactive without having to make Ajax calls back to the server to gather and format data.<\/p>\n

 <\/p>\n

Let’s take the use case of a \u201cWatch Registration System\u201d, where we want users who have recently purchased a watch to be able to register their watch. Some watches the company sells have serial numbers and others do not, so we want to make our \u201cserial number\u201d field disappear when we choose a model that does not have a serial number, and make it appear when we choose a model with a serial number. In our use case we have three watch models: \u201cAnthem\u201d; \u201cAgent\u201d; and \u201cMission\u201d. Only the Mission model has a serial number, so when we choose Mission, we should show the serial number field like in Figure A.<\/p>\n

Figure A<\/em>
\n\"image1\"<\/a><\/p>\n

 <\/p>\n

If we don\u2019t choose any model or we choose one of the other two models, we want to hide the serial number field as in Figure B.<\/p>\n

Figure B<\/em>
\n\"image1\"<\/a><\/p>\n

 <\/p>\n

When using a server-side scripting framework, I could easily generate a JavaScript key\/value pair with model IDs and serial number true\/false. This way if someone updated the reference data and changed one of the models to have a serial number or not, the JavaScript will be generated correctly.<\/p>\n

 <\/p>\n

In Ruby on Rails we could leverage server side .erb to generate<\/strong> an inline JavaScript helper using some code like this:<\/p>\n

 <\/p>\n

Example Ruby on Rails code to generated JavaScript:
\nFile:<\/strong> _form.erb.html<\/p>\n