Как объединить серверные шаблоны и AJAX, чтобы максимизировать возможность повторного использования - PullRequest
Новая
       4

Как объединить серверные шаблоны и AJAX, чтобы максимизировать возможность повторного использования

2 голосов
/ 28 сентября 2011

Прежде чем перейти к конкретной проблеме, рассмотрите следующую общую проблему: Вы используете шаблоны на стороне сервера (например, Smarty) для генерации страницы определенным образом в зависимости от конкретного состояния. Тем не менее, вы также можете изменить состояние и динамически обновлять эту страницу, используя Javascript. Как вы создаете такую ​​систему, которая не требует репликации своей работы как в Javascript, так и в PHP?

Теперь по конкретному вопросу, который относится к вышесказанному. У меня есть панель навигации для образовательного сайта. В зависимости от URL-адреса, предоставленного пользователем, вы можете находиться на разных уровнях навигации: поле, тема, курс, раздел, урок. Например, если пользователь получает доступ к следующему index.php?field=Social_Sciences, следующий PHP будет возвращен и проанализирован PHP и отправлен в Smarty, так что соответствующие субъекты будут перечислены: 

<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>

Аналогичным образом, если пользователь перейдет на index.php?field=Social_Sciences&subject=Economics, PHP проанализирует следующее и отправит его в 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>

Теперь проблема в том, что пользователь также может динамически перемещаться с использованием AJAX, то есть он может щелкать по навигации, не перезагружая страницу. Это означает, что навигационный XML затем должен быть проанализирован jQuery, что означает, что мне нужно написать один и тот же код для синтаксического анализа XML дважды - один раз в PHP и один раз в Javascript. После того, как эта система оказалась громоздкой, я начал использовать AJAX только при начальной загрузке, но это неоптимально с точки зрения скорости и количества запросов. (Если вы считаете, что это тривиально, в моем коде есть другие примеры таких проблем.) Как можно продолжать использовать шаблоны PHP и динамическое обновление AJAX, не переписывая один и тот же код синтаксического анализа дважды на обоих языках?

1 Ответ

1 голос
/ 28 сентября 2011

JSON

Если ваши php-действия возвращали объекты JSON, я бы порекомендовал бета-продукт jQuery .template ()

В идеальном мире выВы находитесь в html 5 и можете напрямую отправлять с сервера jQuery.template () эквиваленты вашей умной работы, как это показано в handml 5 проигрывателе pandora.com, если вы посмотрите внизу исходного кода страницы.это будет выглядеть примерно так: 

<!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>

не html 5

, тогда вам нужно переместить объявление jQuery html 5 <script type='text/x-jquery-tmpl'/> в ваш javascript через $.template("name", html with templating ${} in it); я получуHTML с шаблонами $ {} через вызов ajax.Зачем?Я бы постарался сохранить ваши HTML-шаблоны на стороне сервера.чтобы можно было легко переводить между шаблоном SMARTY и jQuery.Template (), если их синтаксис когда-либо расходится.

...