balupton edited this page Sep 13, 2010 · 2 revisions

jQuery Smarty

Project Page
Demonstration Page

The jQuery Smarty project supports the Smarty templating language (one of the most popular with PHP). This project supports a number of advanced features:

  • Pseudo variables – You can use a special set of variables in a template such as the $smarty.foreach.theForeach.first variable that represents the current index of a template instance.
  • Ajax templates – You can include template files automatically with AJAX by using {include file='include.tpl'}
  • OnChange: Auto Update Modifier – By using the auto_update modifier, it will update the corresponding template block if any of the variables have changed. For example: {$title|default:"No title, so expect the rest to be blank as well..."|capitalize|auto_update}. or specify a selector to update: {$title|capitalize|auto_update:"title_span"}
  • OnChange: Event – You can hook into variable onchange events and add your custom handler – for instance if the $title variable updates, you can have a onchange handler to update document.title with the new value if the title variable changes.

Here is some sample usage demonstrating assigning, rendering, and onchange events.

{foreach from=$tuples key=theKey item=theItem name=theForeach}
	{cycle values='odd,even' assign='class'}
	{if $smarty.foreach.theForeach.first}
		 {assign var='class' value=$class|cat:' first'}
	{elseif $smarty.foreach.theForeach.last}
		{assign var='class' value=$class|cat:' last'}
	{/if}
	

{$smarty.foreach.theForeach.index}|{$smarty.foreach.theForeach.iteration} : {$theItem.custid}, {$theItem.name}, {$theItem.address}

{/foreach}


$(function() {

var data = {
“custids”: [1001,1002,1003],
“names”: [‘John Smith’,‘Jack Jones’,‘Jane Munson’],
“addresses”: [‘253 Abbey road’, ‘417 Mulberry ln’, ‘5605 apple st’],
//
“now”: “now”,
“date”: ‘%I:%M %p’,
“time”: ‘%H:%M:%S’,
“yesterday”: “-1 day”,
//
“tuples”: {
“1001”: {
“custid”: 1001,
“name”: ‘John Smith’,
“address”: ‘253 Abbey road’
},
“1002”: {
“custid”: 1002,
“name”: ‘Jack Jones’,
“address”: ‘417 Mulberry ln’
},
“1003”: {
“custid”: 1003,
“name”: ‘Jane Munson’,
“address”: ‘5605 apple st’
}
}
}
// console.log(‘before assign’);
$.Smarty.assign(data);
// console.log(‘after assign’);

// Copy templates over
$(‘.example’).each(function(){
var $this = $(this);
$this.find(‘.details .result .content.smarty’).html(
$this.find(‘.details .code .content’).html()
);
})

// Populate
$(‘.smarty’).populate();

// Add onchange hanlders
$.Smarty.onchange(‘title’, function(old_value, new_value){
$(‘html > head > title’).html(document.title = new_value);
alert(‘Title has changed from [’+old_value+’] to [‘new_value’]’);
});
});

Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.