Механизм шаблонов PHP или JS? (для нескольких блоков одного и того же html)

Основные вопросы выделены жирным шрифтом внизу, но я расскажу вам, что и почему я спрашиваю.

В основном беру то, что я сейчас делаю для пользователей по одному, и пытаюсь дать им возможность отображать все на одной странице. Использовал PHP для размещения данных в html, но интересовался улучшением своего кода и задавался вопросом, будет ли иметь смысл handlebars.js с javascript, даже просто для моего собственного здравомыслия.

Скажем, у пользователя есть список с флажком рядом с каждым

[x] Option 1
[ ] Option 2
[ ] Option 3
...
[x] Option 20

Для каждого установленного флажка отображается блок html с информацией из базы данных.

Прямо сейчас я отображаю только один блок html на странице. PHP был на той же странице, собирал данные и перебирал 2 массива, сгенерированные из двух запросов, со встроенным php внутри html для генерации текущих блоков html.

....
<div class="option-wrapper">
    <?php foreach ( $option_list as $option ) : ?>
....

С необходимостью генерировать один и тот же блок кода от 1 до 20 раз на одной и той же странице. Думаю, я все еще мог бы использовать встроенный php и перебирать весь блок html, чтобы создать еще один блок html для каждой выбранной опции.

|    Option 1      |  |    Option 20     |
|  Title: Test1    |  |  Title: Test2    |

Но мне было интересно, есть ли преимущество в использовании механизма шаблонов javascript для этой цели. У меня есть javascript, написанный для данных диаграммы, в настоящее время у меня есть скрытые элементы html, в которых хранятся переменные php (из них 15 из двух массивов), которые затем извлекаются моим jQuery. Но я уже чувствую, что скрытие переменных в html, по крайней мере, кажется плохой практикой.

<div id="total-users" style="display:none;"><?php echo $total_users ?></div>
....
var totalUsers = $('#total-users').html();

Возможно, это один из тех вопросов, которые, если вам нужно было задать, скорее всего, являются плохой практикой. Но, честно говоря, разве это плохая практика?

В интересах написания кода более высокого качества, не лучше ли это сделать с помощью json_encode после того, как php соберет все данные. Затем использовать механизм шаблонов javascript, такой как handlebars.js, с блоком HTML, который клонируется для каждого выбранного параметра?

Еще одна вещь: в будущем я, возможно, захочу иметь возможность переключать данные, отображаемые на лету, с помощью раскрывающегося списка в каждом блоке. Имеет ли это значение, какой маршрут имеет больше смысла?

Есть ли что-то еще очевидное, что я упускаю или делаю неправильно?

Спасибо!


person mstef    schedule 31.07.2012    source источник


Ответы (2)


Я настоятельно рекомендую использовать шаблон для данных.

1- Когда пользователь выбирает вариант (или отправляет свой окончательный выбор из всех доступных вариантов), сделайте вызов AJAX для получения объекта JSON (вы можете вернуть один объект или все данные параметра в одном вызове JSON, последнее предпочтительнее).

2- Используйте шаблон (руль, усы, подчеркивание и т. д.), чтобы отобразить данные в функции обратного вызова успеха.

Это сделает ваш код более эффективным и более гибким для будущих запросов пользовательского интерфейса (ваш код будет поддерживать множество различных реализаций с точки зрения взаимодействия с пользователем).

person Joe Johnson    schedule 31.07.2012

Если я вас правильно понял, информация, которую вы извлекаете из базы данных, является статической (то есть она не меняется между каждым нажатием флажка).

Если вышесказанное верно, я бы лично сделал это так. (хотя это только мое мнение)

Я бы взял всю информацию из базы данных (со ссылкой на все «флажки») только один раз, на стороне сервера (PHP). Затем я бы поместил их в скрытые div:

<div id="stuffFromDb1" class="hidden" style="display: none">blablabla</div>

Затем, когда пользователь щелкает флажок, я покажу соответствующий div, изменив display: none на display: block. (с jQuery это еще проще, см. Toggle.

Это кажется мне наиболее эффективным способом вместо получения информации через AJAX или несколько «форм».

РЕДАКТИРОВАТЬ:

Я предпочитаю этот метод AJAX и формировать сообщения, потому что он уменьшает количество запросов к серверу. Если запросы к БД не очень интенсивно используют ЦП (сложные), обычно быстрее запрашивать базу данных один раз, чем несколько раз, и это дает пользователю лучший опыт.

Редактировать2:

Трудно дать вам ответ, не видя кода, но для 100, 200 или даже 1000, я бы поспорил, что в целом было бы быстрее загрузить их все сразу, чем загружать их по 1, особенно если бы вы могли добиться этого, выполнив только 1 запрос к базе данных.

Система шаблонов на стороне клиента всегда зависит от скорости клиента. В новых браузерах/новых ПК JS-движок работает довольно быстро, но для старых ПК/старых браузеров это совсем не так. Сложные манипуляции с DOM + время, необходимое для выполнения запроса AJAX, может занять довольно много времени, в течение которого пользователь может не иметь возможности взаимодействовать со страницей. Кроме того, могут возникнуть и другие проблемы (на ум приходит AJAX Race Condition).

person Tivie    schedule 31.07.2012
comment
Извлекаемая информация является статической здесь, она обновляется в другом месте, но это больше похоже на отчет или сводку данных. Это определенно простой способ добиться этого. Но будет ли это все еще эффективно, если число подскочит. Для каждого запускается дополнительный javascript, отображающий диаграмму. Я мог запускать это всякий раз, когда устанавливал видимость определенных блоков. Но если вместо 20 блоков будет 100 или 200, изменится ли ваше мнение относительно эффективности? Просто любопытно. Запросы не сложные, но эта функция не высечена на камне, поэтому постараемся сделать ее гибкой. - person mstef; 31.07.2012