Зміни в способі обробки Drupal 7 JavaScript та jQuery

14

Зараз я розробляю сценарій JavaScript, який працює на сторінці адміністрації. Я читав про зміни, внесені в Drupal 7, а саме про перехід document.ready()до власної функції jQuery. Однак наступний сценарій не працює.

(function ($) {
  console.log('hello');
  $('#edit-apiusername').append('test');
})(jQuery);

console.log()запускається, і я бачу вихід, але просте додавання не працює. Ідентифікатор поля правильний.
Я не впевнений, чого мені тут не вистачає, але я підозрюю, що це стосується того, як я посилаюсь на об’єкт. Переглядаючи JavaScript код Views 3, я можу побачити, що це зроблено аналогічно.

7 javascript

— цифровий
джерело

Якщо ви console.log ($ ('# edit-apiusername')); чи видає він об'єкт, тобто елемент знайдений на сторінці jQuery?

— budda

Навіть з Drupal 6 ви повинні були використовувати поведінку Drupal замість document.ready. Те, про що ви повідомляєте, не стосується Drupal 7.

— kiamlaluno

28

Я думаю, ви неправильно зрозуміли зміни.

Код JavaScript повинен бути загорнутий, (function ($) { ... })(jQuery);щоб дозволити використовувати $як ярлик jQuery. Це дозволяє jQuery чудово грати з іншими бібліотеками . У цій функції вам залишається чекати завантаження DOM, якщо ви хочете змінити його. Ось що і робить завершення коду jQuery.ready(function(){ ... }).

Але замість використання jQuery.ready(function(){ ... })вам слід використовувати поведінку, щоб дати JavaScript Drupal знати, що ваш код хоче обробляти все, що додається ( або видаляється ) з DOM.

(function ($) {
  Drupal.behaviors.exampleModule = {
    attach: function(context, settings) {
      $(context).find('#edit-apiusername').append('test');
    }
  }
})(jQuery);

— П'єр Буйле
джерело

1

Ви також можете розглянути можливість зведення цілого об'єкта jQuery на іншу змінну на ваш вибір, як у:

$j = jQuery.noConflict();

Ви поставите це поза готовим твердженням, щоб залишити його доступним поза інкапсуляцією.

— Артур
джерело