1

Is there anyway to hide, truncate or limit the json I keep in jQuery Data attributes?

I end up having something like the code below which looks a little messy. Considering the data is in $.cache I don't see the point in actually displaying it in the attribute (unless I have misunderstood how jQuery data works).

<div data-from-json-dot-org-example="{"widget":{"debug":"on","window":{"title":"Sample Konfabulator Widget","name":"main_window","width":500,"height":500},"image":{"src":"Images/Sun.png","name":"sun1","hOffset":250,"vOffset":250,"alignment":"center"},"text":{"data":"Click Here","size":36,"style":"bold","name":"text1","hOffset":250,"vOffset":100,"alignment":"center","onMouseUp":"sun1.opacity = (sun1.opacity / 100) * 90;"}}} "></div>

If I restructured my code then I could make an API request on every click with the code below and just reference the id in the API call. But its not enough code to make an additional call and not needed purely to make the DOM look less cluttered.

<div data-model-id="4"></div>

I'm probably overthinking this but I would like to know what you would do and if there is a way to clean it up. This is because i've recently converted a feature into a plugin, which has changed the dynamics of how the feature works. The original feature was written in AngularJS which looked more concise:

<div ng-click="showModel(model)"></div>
Dol
  • 944
  • 3
  • 10
  • 25
  • Why do you care what the content of an html attribute looks like? It's not visible to the user. – Erik Philips Jul 18 '14 at 22:14
  • I'm more questioning it as a practise and wondering if there is a way to improve it. It seems like an elegant solution for storing ids or strings but not for objects or arrays. – Dol Jul 18 '14 at 22:19
  • would have to escape the data if you use json, or use single quotes on attribute. If you have a lot of elements like this would put all the data in script tag and refernce data from a variable – charlietfl Jul 18 '14 at 22:28

0 Answers0