Как вы смешиваете код JS и Ruby для дальнейшего использования JS?

Question

Я использую виджет DatePicker пользовательского интерфейса jquery для отображения календаря. Каждый день в календаре представлен коллекцией объектов Result, которые принадлежат объективной модели. Если все результаты за день успешны, я устанавливаю класс в ячейке календаря, чтобы он стал зеленым. Если хотя бы один из них потерпел неудачу, я делаю его красным. Если нет результатов, я делаю это серым. Прямо сейчас я делаю что-то вроде этого:

<%= start_day .. end_day do |day| %>
   <div class="hidethis" id="<%= [day.year,day.month,day.year].join(",") %>" value="<%= objective.result_status_for_day(day)%>"/>
<% end %>

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

Answer 1

Использование HTML для хранения данных кажется немного обыденным. Почему бы не сохранить ваши данные как данные JavaScript? Примерно так:

<script type="text/javascript">
    window.app = window.app || { };
    window.app.objective_data = <%= @raw_objective_data.to_json.html_safe %>;
</script>

Затем настройте необработанные данные в Ruby, оставьте их в @raw_objective_data, а затем загрузите их в модели на стороне клиента во время этапа инициализации. Или вы можете загрузить данные прямо в ваш (Java | Coffee) Script с помощью простого вызова AJAX.

Вы также хотите избежать '</script>' и подобных вещей в @raw_objective_data.to_json, вы можете узнать об этом здесь .

Answer 2

Я бы не использовал атрибуты id и value.Я не думаю, что тег div даже поддерживает атрибут value.Вместо этого я бы использовал атрибуты данных, которые позволяют вам писать допустимую разметку HTML, одновременно встраивая данные в вашу страницу.

<%= start_day .. end_day do |day| %>
   <div class="hidethis" data-date="<%= [day.year,day.month,day.year].join(",") %>" data-value="<%= objective.result_status_for_day(day)%>"></div>
<% end %>

var value = $('div').attr('data-value');