Одна вещь, которую я не понимаю о ненавязчивом JavaScript

Question

Мне нравится идея разделения функциональности, и это похоже на путь будущего.

Но я привык интегрировать javascript внутри циклов во встроенный язык, такой как Rails ERB или PHP, где я могу использовать идентификатор конкретного объекта в качестве ссылки в javascript.

Пример Rails:

<% @comments.each do |comment| %>
  <div id="comment_<%= comment.id %>">
    <%= comment.text %>
    <% link_to_function "Reply", "$('comment_#{comment.id}').insert(\"#{escape_javascript(render :partial => "_form", :locals => {:comment => comment})}\", {position: 'bottom'});" %>
  </div>
<% end %>

Это не единственный раз, когда я захотел использовать методы Ruby внутри javascript. Я могу захотеть использовать константы или вызвать другие методы ruby ​​для объекта внутри цикла user.enabled? или user.full_name, или визуализировать партиалы с этими объектами и т. Д.

Так, как это должно быть достигнуто, если весь javascript находится в другом файле или вне цикла? Я понял, что вы можете перебирать кучу div в javascript, используя селекторы CSS, но это не позволяет мне вызывать методы ruby ​​для объектов.

Чего мне не хватает? Спасибо!

Answer 1

Я думаю, что это должно быть сделано с параметром "data-id", как показано в этом скриншоте http://railscasts.com/episodes/229-polling-for-changes

Answer 2

Для вашего конкретного примера у вас уже есть код комментария, закодированный в разметке, потому что вы установили атрибут ID элемента div в идентификатор комментария. Таким образом, вы можете отключить JavaScript.

Answer 3

Вам просто нужно больше знаний JavaScript, чтобы увидеть его мощь, особенно jQuery.Ваш пример я бы решил так:

<% @comments.each do |comment| %>
  <div class="comment">
    <%= comment.text %>
    <a href="reply.php?id=<%= comment.id %>" class="reply">Reply</a>
  </div>
<% end %>
<script type="text/javascript">
  $('.comment .reply').click(function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    var result = url.match(/\?id=(\d+)([^\d]|$)/);
    var id = (result && result[1]);
    if (id) {
      // do whatever you want to do with the id
    }
  });
</script>

Преимущества:

(1) У вас нет повсюду JavaScript

(2) Работает без JavaScript

Answer 4

Заставьте ваш клиентский скрипт принимать в качестве параметра объект 'options'.Не используйте сценарии на стороне сервера;поместите скрипт в его собственный файл .js.

Затем создайте объект 'options' с помощью серверного скрипта, который выводит js.Включите ваш скрипт и вызовите его функцию точки входа, передав объект «параметры».

Answer 5

Извините за использование jquery, но веб-разработка действительно ужасна без нее или подобной библиотеки

Для вашей первой жалобы (получите текущий комментарий) javascript this отлично работает для меня.

onclick="my_function(this);"

и в файле js

my_function = function(target) {
    // clicked element passed in
    // now, let's get comment element by class
    var comment = $(target).parents('.comment');
}

Что касается второй жалобы ... Мне это часто не требовалось, но иногда я включаю фрагменты данных в html для использования в javascript.Расширение предыдущего примера:

<div class="comment" comment_id="<%= comment.id %>"></div>

И в my_function

var comment_id = comment.attr('comment_id');