Attackr.com

It seems like some people can just be near a book about something ‘new’, and somehow absorb enough of it to make do. Unfortunately, I am not one of those people. When learning something new, it’s my preference to be able to do some basic things (manipulating string, simple data structures, and basic-type operations with a database or a data-structure of some sort) before openly admitting to myself that it’s possible to ‘use’ a new technology.

Add to this self-imposed regiment of learning, the process of absorbing something new – still in Beta, and the craziness factor goes up a few levels… While my chops are getting proofed, the developer is not even  finished – the plugin isn’t solidified and ready for release!

jQuery templates (tmpl()) is one of these type of endeavors.  The functionality is there, but nothing is set in stone yet. However, these are the basic concepts that are not published anywhere at the moment.

The basic premise is you get a piece of data, a json string.  In jQuery, a data string look like this: (notice the “[" & "]” on each end of the string)

[{"id":"1","title":"Home","content":"Home Page...\r\nLorem ipsum dolor sit amet, ","region":"main","display":"1"}]

Don’t let this get confusing off the bat. It is EXACTLY just like a row from a database table. Look closer at the first few pieces:

[{

"id":"1",

"title":"Home",

"content":"Home Page...

No surprises... it's just the column name, and the data that it has assigned to it.

When javascript (jQuery) passes a json string, it is wrapped in the braces ("[ ... ]"). The jQuery tmpl() method strips these off (for our convenience, or for functionality of jQuery - no one was able to give a definitive answer on that question), but when we work with this json string, it will be a pure piece of data thanks to the braces being stripped off.

This may seem like a tedious approach, but if you want to do more than just sling a string at your front end, then you'll want to know what it is you're controlling (the data).

For now our data looks like this:

data = var people = [
{
firstName: "John",
lastName: "Doe",
}
];

,  we're doing 'onesies' before going nuts and adding more data!

An easy way to think of this is, we have our data. We have a var named, "people", and it has one object (one key and one value).  If you output people.firstName, it will equal "John".  If we output people.lastName, it will equal "Doe".

When working on something 'new', it's good to use the latest CDN (content delivery network) version of the scripts. As it turns out, this is wise, considering tmpl is still BETA - it's nice to know if something "I KNOW" worked, stops working due to a change in the code plugin.

The next step is to make a function to extract the data we want to extract from the string.

function getFirstName() {
return this.data.firstName;
}

When 'getFirstName()' is executed, it will get look at the data we've predefined. You've probably guessed that we could get lastName with such a function too? (you're right!).  Regardless of how much data was defined in the structure, we could extract it this way.

$(function(){
$( "#tmplPeople" )
.tmpl( people )
.appendTo( ".peopleTable" );
});

Before tip the box over and let you look in, it may be best to explain what 'will be happening' when it all fires.

This function will look for a defined template called, "#tmplPeople". it will look at your predefined data (people - of which we have one entry for now). It will take the data, place it into the template (named tmplPeople) and then snap it into the peopleTable. S0,  our one data entry, will be formatted, then put into the html table.

<script id="tmplPeople" type="text/x-jquery-tmpl">
<tr>
<td colspan="2">${getFirstName()} </td>
</tr>
</script>

<table><tbody></tbody></table>

here is our <table>, that will house the templates after the data is parsed by the function we looked at above. Right above the <table> is our template we labled "tmplPeople". As you can see, each time that template is called (tmplPeople), it is going to call our 'getFirstName' function, and it is going to take the first name from our data, and populate it into the template, then it will add it to the table.

Here is the whole code snippet, if this generates any feedback, we'll continue onto the many other ways to parse data from json!

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

<script type="text/javascript">// <![CDATA[


function getFirstName() {
return this.data.firstName;
}

function getLastName() {
return this.data.lastName;
}

$(function(){
$( "#tmplPeople" )
.tmpl( people )
.appendTo( ".peopleTable" );
});

// ]]></script>

<script id="tmplPeople" type="text/x-jquery-tmpl">// <![CDATA[


<tr>
<td colspan="2">${getFirstName()}  ${getFirstName()}</td>
</tr>

// ]]></script>
<table>
<tbody></tbody>
</table>

Related Posts:

• No Related Posts