client-side templates?

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

client-side templates?

Post 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? :( :?
User avatar
Inkyskin
Forum Contributor
Posts: 282
Joined: Mon Nov 19, 2007 10:15 am
Location: UK

Re: client-side templates?

Post 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?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Re: client-side templates?

Post 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.
User avatar
Inkyskin
Forum Contributor
Posts: 282
Joined: Mon Nov 19, 2007 10:15 am
Location: UK

Re: client-side templates?

Post by Inkyskin »

I do it the way your currently doing it :D 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.
User avatar
php_east
Forum Contributor
Posts: 453
Joined: Sun Feb 22, 2009 1:31 pm
Location: Far Far East.

Re: client-side templates?

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Re: client-side templates?

Post 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.
User avatar
php_east
Forum Contributor
Posts: 453
Joined: Sun Feb 22, 2009 1:31 pm
Location: Far Far East.

Re: client-side templates?

Post 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.
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Re: client-side templates?

Post 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? :?
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: client-side templates?

Post 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>
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Re: client-side templates?

Post by Luke »

Funny, I was just considering doing that very thing. Thanks John. I think that's what I'll do :)
User avatar
php_east
Forum Contributor
Posts: 453
Joined: Sun Feb 22, 2009 1:31 pm
Location: Far Far East.

Re: client-side templates?

Post 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 ?
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: client-side templates?

Post 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.
(#10850)
User avatar
jayshields
DevNet Resident
Posts: 1912
Joined: Mon Aug 22, 2005 12:11 pm
Location: Leeds/Manchester, England

Re: client-side templates?

Post by jayshields »

Clever idea, I will refer to this if I ever need to accomplish the same thing.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: client-side templates?

Post by John Cartwright »

Arborint, can you elaborate a bit more on this concept?
User avatar
Luke
The Ninja Space Mod
Posts: 6424
Joined: Fri Aug 05, 2005 1:53 pm
Location: Paradise, CA

Re: client-side templates?

Post by Luke »

He means instead of using whatever client side technology to render the page, he renders the entire thing with javascript.
Post Reply