How to merge server-side templating and AJAX to maximize reusability

开发者 https://www.devze.com 2023-04-09 01:40 出处：网络

Consider the following general issue before I go to the specific problem: You use server-side templating (e.g. Smarty) to generate a page in a particular way depending on a particular state. However, you can also change the state and update that page dynamically using Javascript. How do you construct such a system that does not involve replicating one's work in both Javascript and PHP?

Now, for the specific question that relates to the above. I have a navigation bar for an开发者_运维知识库 educational website. Depending on the URL provided by the user, you can be at various levels of navigation: field, subject, course, section, lesson. For example, if the user accesses the following index.php?field=Social_Sciences, the following XML will be returned and parsed by PHP and sent to Smarty such that the appropriate subjects are listed:

<subjects>
    <subject>
    <id>81</id>
        <name>Sociology</name>
        <description>Sociology</description>
        <path>/data/material/Social_Sciences/Sociology/</path>
    </subject>
    <subject>
    <id>82</id>
        <name>Economics</name>
        <description>Economics</description>
        <path>/data/material/Social_Sciences/Economics/</path>
    </subject>
</subject>

Similarly, if a user goes to index.php?field=Social_Sciences&subject=Economics, PHP would parse the following and send it to Smarty:

<courses>
    <course>
        <id>65</id>
        <name>Introduction to Microeconomics</name>
        <description>Introduction to Microeconomics</description>
        <path>
        /data/material/Social_Sciences/EconomicsIntroduction_to_Microeconomics/
        </path>
    </course>
    <course>
        <id>66</id>
        <name>Introduction to Macroeconomics</name>
        <description>Introduction to Macroeconomics</description>
        <path>
        /data/material/Social_Sciences/EconomicsIntroduction_to_Macroeconomics/
        </path>
    </course>
</courses>

Now, the problem is the user can also dynamically navigate using AJAX--that is, they can click through the navigation without reloading the page. That means the navigation XML then has to be parsed by jQuery, which means I have to write the same code to parse the XML twice--once in PHP and once in Javascript. After this system proved unwieldy, I started only using AJAX even on the initial load but this is sub-optimal in terms of speed and number of requests. (If you think this is trivial, there are other examples of such issues in my code.) How can one continue to use PHP templating and dynamic AJAX updating without re-writing the same parsing code twice in both languages?

JSON

If you're php actions were returning JSON objects, then I would recommend jQuery's beta product .template()

In a perfect world, you're in html 5 and can send the jQuery.template() parser equivalents of your smarty work from the server outright, as found on pandora.com's html 5 enabled player if you look at the bottom of the page source. it will kind of look like this:

<!DOCTYPE html>

    <html>
    <head>
<!--- pilfered from jQuery.com's demo linked above --->
<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">
$(document).ready(function(){
   $("#aControl").click(function(event){
     $.get("/your/url").success(function(text, response, jQxhr){
        $("#iWillPrintACourseTemplate").tmpl(response).appendTo("#tbodyDestination");
     }).error(function(text, response, jQxhr){
     });
   });
});
</script>
</head>
<body>
<script id="iWillPrintACourseTemplate" type="text/x-jquery-tmpl"> 
  <tr class="detail"><td><p>stuff : ${id} - ${}</p><p>${description}</p><p>${path}</p></td></tr>
</script>
<div><a id="aControl" href='#'>click me</a></div>
<table>
<thead/>
<tfoot/>
<tbody id="tbodyDestination">
</tbody>
</table>
</body>
</html>

not html 5

then you have to move the jQuery html 5 <script type='text/x-jquery-tmpl'/> declaration into your javascript via a $.template("name", html with templating ${} in it); i would get the html with templating ${} stuff via an ajax call. Why? I would try to keep your html templates server side. to allow easy translation between a SMARTY template and a jQuery.Template() should their syntax ever diverge.