Блог

Поэтому я действительно предпочитаю использовать ненавязчивый javascript встроенному javascript. Я нахожу, что с ним намного проще работать.

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

Например:

У меня есть список, и я генерирую следующий HTML (здесь это псевдокод)

 <%for e in list%>
    <a href="#" class="delete"><%=e%></a> <!-- <%= e.id %> ??-->
<%end%>
  

Итак, я хочу прикрепить javascript к каждому из этих тегов <a>, которые будут вызывать ajax post, но мне нужен «id», чтобы удалить правильный элемент из серверной части.

 $('a.delete').click(function() {
    // Ajax request using "e.id"
});
  

Некоторые вещи, которые я пробовал:

1. Создание href и использование attr метода для отправки ajax-запроса на этот URL. (Мне не очень нравится это для запросов POST, но это работает.
2. Использование rel атрибута для хранения нужных мне данных.
3. С использованием атрибутов HTML5 data . (Я не знаю о доступности этого во всех браузерах, и поскольку нам нужно поддерживать IE6 , мне не очень нравится идея использовать это.)
4. Создание формы для каждого тега <a> и ее сериализация. (Это кажется большим количеством дополнительного кода, но он также кажется действительно чистым.)

Каковы наилучшие методы для достижения этого?

Используйте id атрибут для хранения строки с идентификатором следующим образом:

 <%for e in list%>     
    <a id="link_<%= e.id %>" href="#" class="delete"><%=e%></a> 
<%end%> 
  

И считывание идентификатора путем разделения на что-то вроде символа подчеркивания:

 $('#list a').click(function(){
    //old var id = $(this).attr('id').split('_')[1];
    var id = this.id.split('_')[1]; //thx @mu

    $.ajax({
        url: 'http://www.someurl.com/delete.aspx?id='   id,
        //...more
    })
});
  

Я часто сохраняю такого рода данные в теге вот так:

Метод атрибутивного тега

    <div id="list">
      <a href="/link" post_id="68">Some post</a>
   </div>
  

Затем в jQuery сделайте что-то вроде:

  $('#list').delegate('a.delete', 'click', function(event) {
     event.preventDefault(); // Stop default click event
    
     // ajax stuff here
     // $(this).attr('post_id') = 68
 });
  

Обновление: .attr('post_id') Не работает в IE6.

Альтернативные методы? Хм….

Все они используют вышеупомянутую функцию делегирования.

В выделенном элементе, используя класс или идентификатор, для определения данных элементов:

    <div id="list">
    <a href="/link"><span class="hide post_id">66</span>Some post</a>
   </div>
  

• Доступ с помощью: $('span.post_id', this).text()

Вероятно, одна из худших идей для простых идентификаторов, но если вам нужно хранить сложные данные, то добавление их внутрь элемента может быть вариантом.

В href…

    <div id="list">
      <a href="/link/66">Some post</a>
   </div>
  

• Доступ с помощью: $(this).attr('href').match(//([0-9] )$/)[1]

Очевидно, что этот метод зависит от вашего URL. Это один из самых ненавязчивых методов, предполагающий, что ваша структура URL не слишком сложна или часто меняется.

Это идентификатор. Это уникально. Давайте определим:

    <div id="list">
      <a href="/link" id="post_66">Some post</a>
   </div>
  

• Доступ с помощью: $(this).attr('id').split('_')[1]

Преимущество этого метода в том, что вы также можете стилизовать элементы на основе определенных идентификаторов — иногда это полезно. Это также имеет наибольший смысл. Ваш идентификатор уникален. Эта ссылка привязки относится к этому сообщению, к этому уникальному идентификатору, поэтому использование атрибута id имеет смысл.

Вы можете прикрепить идентификатор к каждому <a> элементу вот так <a href=".." id="delete_<%e.id%>" > , затем, когда вы прикрепляете событие к этой ссылке, вы можете найти идентификатор через string indexOf и использовать соответствующую функцию ajax.

Прошло некоторое время, и я нашел решение этой проблемы, которым я доволен. Возможно, это не идеально, но это лучшая альтернатива, которую я нашел на данный момент.

Честно говоря, все эти ответы верны — они будут работать просто отлично. На данный момент это просто вопрос эстетики и YMMV.

Итак, в том же псевдокоде шаблона:

 <% for e in list %>
  <a href="#" class="delete"
     data-method="delete"
     data-url="<%= delete_url(e.id) %>"><%= e %></a>
<% end %>
  

И какой-нибудь jQuery, который будет делать то, что я хочу:

 $('a.delete').on('click', function(e) {
  var self = $(this);
  var method = self.data('method');
  var url = self.data('url');

  $.ajax({
    url: url,
    type: method
  }).done(function() {
    alert('woot - success');
  });
});
  

Я думаю, data что элементы в настоящее время являются лучшим способом узнать, как взаимодействовать с веб-сервисом. Это позволяет нам использовать те же помощники URL, которые мы использовали бы при рендеринге представления.