Использование $ (this) изнутри jQuery.extend()

Question

Я использую jQuery form plugin и хочу, чтобы этот плагин использовался на каждом form.ajaxify. Поэтому у меня есть следующее:

$('form.ajaxify').ajaxForm(
    // the options 
); 

С HTML <form class="ajaxify" ...> ... </form>.

Теперь у меня есть некоторые опции, которые я хочу передать всегда, например dataType:'json'. В дополнение к этому, я хочу, чтобы иметь возможность поставить больше возможностей в form тега, например:

Это действует в соответствии с the docs on .data().

Так что я думал, что буду использовать jQuery.extend(). Я пытался поставить его так:

$('.ajaxify').ajaxForm(
    jQuery.extend(
     { 
      dataType: 'json' 
     }, 
     $(this).data('ajaxify-options') 
    ) 
); 

Однако, это не работает: только буквальный объект передается, и ничто не будет продлен. I предположим, что это не работает, потому что $(this) больше не ссылается на элемент form.ajaxify. Это верно? Обычно можно было сохранить $(this) в переменной, однако это означало бы усложнение кода, верно? Это было бы невозможно на одной линии больше. Или есть другое решение?

Answer 1

Я полагаю, что это не сработало, потому что $(this) больше не ссылается на элемент form.ajaxify. Это верно?

Да, хотя this никогда не обращался к этому элементу. Он работает только внутри функций обратного вызова, вызванных jQuery, однако вы используете его для построения аргумента для вызова ajaxForm. this будет ссылаться на то, что the this context currently refers to.

Обычно можно сохранить $(this) в переменной, однако это означало бы усложнение кода, не так ли?

Вы бы хранить $('form.ajaxify') в переменной, как $(this) не имеет смысла, но да, что то, как это должно быть сделано. Это на самом деле не «усложнять» код, хотя:

var form = $('.ajaxify'); 
form.ajaxForm($.extend({ 
    dataType: 'json' 
}, form.data('ajaxify-options'))); 

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

Для сниппета, который работает для нескольких форм в выбранной коллекции, вы можете использовать .each() применять метод на каждом отдельном элементе, возможно, с различными вариантами - и в обратный вызов, теперь вы можете использовать this:

$('.ajaxify').each(function() { 
    // caching $this=$(this) is possible as well, but not as necessary 
    $(this).ajaxForm($.extend({ 
     dataType: 'json' 
    }, $(this).data('ajaxify-options'))); 
});