Reusing data using jQuery Templates in PropertyAgent
host posted on October 05, 2010 16:36
jQuery Template?
After reading jQuery Templates and Data Linking (and Microsoft contributing to jQuery) I wanted to see if I could use this in DotNetNuke. My first try was using the PropertyAgent module. But another idea would be to use OpenWebStudio since it doesn't have the issues I ran into with PropertyAgent.
Issues with PropertyAgent
Because PropertyAgent uses [CUSTOM:NAME] in its templates it automatically removes other occurrences of [ and ] therefore we cannot build up the array object directly but have to do a small workaround. So for more complex usage I would redo my module in for example OpenWebStudio
Setting up the PropertyAgent latest module
Header
<div id="Storage">
Item
<a rel="[CUSTOM:TITLE]" title="[CUSTOM:DESCRIPTION]" />
Footer
</div>
As you can see this HTML does nothing but make a way I can reuse this data because of before mentioned issues with the [ and ]
Process the returned data to be used
<script type="text/javascript">
var DataList = [];
var a = 0;
$("#Storage a").each(function(i) {
DataList[a] = {};
DataList[a]["name"] = this.rel.trim();
DataList[a]["phone"] = this.title;
a++;
});
</script>
Setting up the jQuery templates
<script id="contactTemplate" type="text/html">
<div class="block">
Name: {{= name }} <br />
Phone: {{= phone }}
</div>
</script>
<script id="mycontactTemplate" type="text/html">
<div class="block">
Name: {{= name }} <br />
Phone: {{= phone }}
{{if name == 'Armand Datema'}}
<i>this is me </i>
{{/if}}
</div>
</script>
Now lets process the data and apply the templates
<div id="contactContainer"></div>
<div id="mycontactContainer"></div>
<script type="text/javascript">
$("#contactTemplate").render(DataList).appendTo("#contactContainer");
$("#mycontactTemplate").render(DataList).appendTo("#mycontactContainer");
</script>
Check out the result of this setup here
As soon as there is a fix for the [ not being repalced in PropertyAgent templates this could open up for some interesting use of the data in the ProperyAgent tables. But not just PropertyAgent tables. This would also work Great with OpenWebStudio or use this to return templates Json objects etc.
]