Page 1 of 2
client-side templates?
Posted: Mon Mar 23, 2009 10:42 am
by Luke
Since I started trying to write ajax applications, one thing I seem to run into very frequently is, I guess, the issue of templating. I have spent countless hours attempting to write my php templates as DRY as possible. I have made sure that template code is defined in one place only. On the server side, this is a piece of cake. When you start bringing ajax functions into it, it gets a bit tougher. Let's say I have the following html code (simplified for brevity):
Code: Select all
<ul id="selections">
<li class="item"><a href="/barker/bob/">Bob Barker</a></li>
<li class="item"><a href="/jones/jenny/">Jenny Jones</a></li>
<li class="item"><a href="/reiner/rob/">Rob Reiner</a></li>
<li class="item"><a href="/wonka/willy/">Willy Wonka</a></li>
</ul>
In the back-end, I'd represent this code something like this:
Code: Select all
<ul id="selections">
<?php foreach ($this->people as $person): ?>
<li class="item"><a href="<?php echo $this->url("person", array('person' => $person->getPk())); ?>"><?php echo $person->getFullName(); ?></a></li>
<?php endforeach ?>
</ul>
With me so far? OK. Now, let's introduce ajax. What happens when I want to dynamically update this list with ajax when a user performs some kind of action? How do I ensure that my ajax knows how to put the html together when it adds to the list? Honestly what I'm doing right now is just duplicating code. I'm basically writing the template in two places... in my php template and in my ajax functions.
Code: Select all
$(function() {
$("#selections").click(function() {
person = getPerson(); // some made-up function
var html = "<li class='item'><a href='" + person.url + "'></a>" + person.fullname + "</li>";
$(this).append(html);
});
});
How do people usually do this?

Re: client-side templates?
Posted: Mon Mar 23, 2009 11:28 am
by Inkyskin
Pretty much the only way I could see you cutting out doing things twice, would be to create a function that generates the list (in PHP), and call that function within the template, and then also call that function via AJAX to insert with the Javascript too. I can see that being a lot slower than your current method though.
Is it really that much work to have to write a few bits of HTML twice though?
Re: client-side templates?
Posted: Mon Mar 23, 2009 11:32 am
by Luke
It's not so much the extra work that I'm worried about. It's consistency. When I have templates created in two places, I run the risk of having different html. I run the risk of changing something in one place and forgetting to do it in the other, which can lead to difficult-to-debug situations. It can also lead to me testing it and thinking it works fine, only to be reported by an actual user a month down the road that the ajax part doesn't work. There has to be a way to do this. How does everybody else do it?
I mean, I'm talking about potentially hundreds of different places where I need this. This isn't a one-off situation.
Re: client-side templates?
Posted: Mon Mar 23, 2009 11:35 am
by Inkyskin
I do it the way your currently doing it

lol
If your using jQuery, a function like this may be useful:
http://docs.jquery.com/Manipulation/appendTo#selector
That way you can output a blank list item in PHP and set it to hidden, and just append it and show it when needed? Just give it a unique ID and shove the HTML you need inside of it before you show it after appending it.
Re: client-side templates?
Posted: Mon Mar 23, 2009 11:40 am
by php_east
i don't think you should append html at all. the way i do it is to add and take away elements as required. i leave the html frame as it is.
Re: client-side templates?
Posted: Mon Mar 23, 2009 11:41 am
by Luke
php_east wrote:i don't think you should append html at all. the way i do it is to add and take away elements as required. i leave the html frame as it is.
what??

Aren't your two sentences completely contradictory? Explain.
Re: client-side templates?
Posted: Mon Mar 23, 2009 11:52 am
by php_east
sorry, i meant html elements of interest only, not the entire holding html elements, which is the frame supporting the entire design so to speak.
Re: client-side templates?
Posted: Mon Mar 23, 2009 11:58 am
by Luke
dude I dont know what you're talking about... I am only working on the "elements of interest". Do you think I'm re-rendering the entire page or something?

Re: client-side templates?
Posted: Mon Mar 23, 2009 12:01 pm
by John Cartwright
One thing I have done in the past is include a "ghost row" which will hold the template information requried. Then, using jquery you can clone this row, and modify the row as neccesary (i.e. change visibility, change id attr, etc). Althought it is a little extra work I think it solves the problem.
I.e.,
Code: Select all
<ul id="foolist">
<li id="foolist-templaterow" style="display: none;"></li>
<?php foreach ($foo->getRow() as $row) : ?>
// etc
<?php endforeach; ?>
</ul>
Re: client-side templates?
Posted: Mon Mar 23, 2009 12:05 pm
by Luke
Funny, I was just considering doing that very thing. Thanks John. I think that's what I'll do

Re: client-side templates?
Posted: Mon Mar 23, 2009 12:07 pm
by php_east
Luke wrote:dude I dont know what you're talking about...
perhaps.
Luke wrote:I am only working on the "elements of interest". Do you think I'm re-rendering the entire page or something?

no you're not. element <li is not of your interest to change. that is your frame. and you are repeating it, which is why you have an issue with consistency and duplication of html. yes ?
or have i misunderstood something ?
Re: client-side templates?
Posted: Mon Mar 23, 2009 12:09 pm
by Christopher
I have been moving more toward just sending JSON and having Javascript render everything in cases where I want all the templates client side. Once you abandon the notion that pages should be able to work without Javascript then things open up considerably.
Re: client-side templates?
Posted: Mon Mar 23, 2009 12:09 pm
by jayshields
Clever idea, I will refer to this if I ever need to accomplish the same thing.
Re: client-side templates?
Posted: Mon Mar 23, 2009 12:25 pm
by John Cartwright
Arborint, can you elaborate a bit more on this concept?
Re: client-side templates?
Posted: Mon Mar 23, 2009 12:26 pm
by Luke
He means instead of using whatever client side technology to render the page, he renders the entire thing with javascript.