Hello,
Disclaimer: I am new to JQuery and have been learning mostly on my own, so I may be violating a lot of best practices
Question: How can I store Data to the DOM while it is being generated with JQuery templates?
Issue: I am using JQuery Templating to present a lot of hierarchical data in a standard format and create graphs. Below the $data variable represents the unique id of a data section (i.e. '2-1-0'). I'm also passing a line, bar and pie boolean as to whether or not those types of chart should be created.
- <script id="graphAreaTmpl" type="text/x-jquery-tmpl">
- <div class="graphcontainer" id="${$data+'gcnt'}" >
- {{if $item.line}}
- <div id = ${$data + 'line'}></div>
- {{/if}}
- {{if $item.bar}}
- <div id=${$data + 'bar'}></div>
- {{/if}}
- {{if $item.pie}}
- <div id=${$data + 'pie'}></div>
- {{/if}}
- </div>
- ${ storeGData($data, $item.gData)}
For performance's sake, I would like to render these graphs only if the user clicks on a button, so basically, I want to store the data associated with these graphs using the JQuery .data() function, preferably to the
- <div class="graphcontainer" id="${$data+'gcnt'}" >
However, when I try to do so directly after this template using javascript, the data function doesn't seem to store the object. For example after the closing </div> tag, I tried calling a function:
- function storeGData(id, gData)
- {
- $( '#' + id + 'cnt').data('gData', gData);
- var test = $( '#' + id + 'cnt').data('gData');
- }
The test variable is basically undefined each time. In testing, I can see the values are there, but the data function doesn't seem to be storing. I believe this is probably a result of using templating and a lack of understanding about how it works, but any ideas you can provide to attack this problem would be greatly appreciated.