I have an array that looks similar to:

var myData = [
{ hrefVal : 'mypage.php', lnkTxt : 'My Page' }
Then I'm using:

$.template( 'tpl_gNav', '<li><a href="/$(hrefVal)" class="nav">${lnkTxt}</a></li>' );

$.tmpl( 'tpl_gNav', myData ).appendTo( '#cGnav ul' );

I am expecting the resulting markup to be rendered as:
HTML Code:
<li><a href="/mypage.php" class="nav">My Page</a></li>
but instead, I'm getting:

<li><a href="/$(hrefVal)" class="nav">My Page</a></li>

I can't seem to get any values to be displayed as attribute values within the markup. Can anyone see what I'm doing wrong?