<?php
// use hook for attachment of library to module
function mymodule_page_attachments(array &$page) {
// using this variable we are creating js file initialization
$page['#attached']['library'][] = 'mymodule/mymodule-js';
$page['#attached']['drupalSettings']['mymodule'];
}
?>
Drupal.behaviors.mymodule = {
attach: function (context, settings) {
// using this code we are just for learning proposed we just add class on site logo
you can write code of js below the comment.
jQuery('.site-branding__logo' , context).addClass('fancy-pants');
}
}
(function (Drupal) {
Drupal.behaviors.exampleBehaviour1 = {
attach: (context, settings) => {
// Add a delicious text to the top of the document
let header = document.querySelector(".food-list-header");
// jQuery Equivalent
// $(".food-list-header");
if (header) {
let greatFoodSpan = document.createElement("span");
greatFoodSpan.textContent = "Get ready for great food!!!!!!";
header.append(greatFoodSpan);
}
// Add the event listener for each click on the food
let foods = document.querySelectorAll(".views-row");
foods.forEach((food) => {
food.addEventListener("click", () => {
let foodCounter = food.querySelector(".food-click-counter");
let timesClicked = parseInt(foodCounter.textContent.trim());
foodCounter.textContent = ++timesClicked;
});
});
},
};
})(Drupal);
8条答案
按热度按时间q3qa4bjr1#
此外,模块可以覆盖或扩展现有的行为(例如,如果一个模块具有在所有链接上添加反弹效果的行为,则第二模块可以用不同的反弹效果来替换该行为)。
此外,从Drupal 7开始,使用drupal_add_js(PHP)或Drupal.settings. modulus(JavaScript)定义的设置直接作为第二个参数(第一个是上下文)传递给行为。
举例来说:
如果你的一个脚本(或另一个)创建了新节点,它仍然可以将行为应用到新节点上,而不必知道安装了哪些其他模块:
f45qwnt82#
重复功能
注意Drupal.behaviors架构重复了jQuery中已经存在的功能。
此外,在撰写本文时,似乎没有任何Drupal.behaviors的文档或案例研究在Drupal本身之外**; Drupal中的文档(如上所述)可以从改进中受益匪浅。在撰写本文时,主要的详细文档似乎是收费的限制访问。
这意味着您可能会注意到性能降级,异常和意外结果与Drupal.behaviors生态系统特有的标准jQuery不一致。
原生jQuery功能
与Drupal.behaviors相比,标准jQuery API的内置功能有广泛的文档,包括内联演示和示例。此外,在jsfiddle等网站上有许多免费的示例。
请参阅部分中的链接列举了与处理插入到文档中的新DOM元素相关的jQuery API调用。
参见
f2uvfpb93#
沿着上面提到的答案的关键是你可以把数据从php传递到JavaScript,如下所示
使用“Drupal.settings”将值从PHP传递到JavaScript
您可以使用Drupal.settings在前端使用**drupal_add_js()**函数轻松地将PHP中的变量提供给JavaScript
或
这将在JavaScript中可用:
wgmfuz8q4#
寻找类似的答案,到了这里,仍然没有线索。最后从这里的一篇文章中找到了更多的解释(和例子):https://benmarshall.me/drupal-behaviors/
我不是原作者,所以只能引用一些文字:
什么是Drupal行为?
简而言之,Drupal.behaviors是实现jQuery.ready的更模块化和更好的方法。jQuery.ready只在DOM准备好操作时运行一次,而Drupal.behaviors可以在页面执行期间多次运行。更好的是,每当新的DOM元素插入到文档中时,它们都可以运行(即,AJAX驱动的内容)。
Drupal.behaviors还可以覆盖甚至扩展现有的行为。例如,如果一个模块行为在所有链接上添加了反弹效果,另一个模块可以用不同的反弹效果替换该行为。
Drupal.behaviors的另一个额外好处(从Drupal 7开始)是能够使用drupal_add_js(PHP)或Drupal.settings. modulus(JS)并将设置作为第二个参数(第一个是上下文)传递给行为。
mbzjlibv5#
Drupal有一个“行为”系统,它提供了一种模块化的更好的方式来附加JavaScript功能,以将元素放置在页面上。Drupal Behaviors允许你覆盖或扩展现有的行为。这些Drupal行为是事件触发的程序,附加到要更改的页面元素。虽然行为可以附加到特定的内容,但也可以附加多个行为,并且可以多次燃烧以快速重拍。
通过将逻辑附加到Drupal. behaviors来实现JavaScript。下面是从该页面中提取的一个示例:
;
wwodge7n6#
如果您的JavaScript需要在页面加载时和AJAX请求(在您的文档/html中添加了一些新元素)之后执行,则会使用Drupal行为。
您的模数:这是您的命名空间,应该是唯一的。例如,这通常是模块的名称,但不是强制性的。
context:这真的很酷,在页面加载时,context将包含整个文档,在AJAX请求后,将包含所有新加载的元素。这样,您可以将通过AJAX加载的内容与其他内容区别对待。
settings:这包含通过PHP传递给JavaScript的信息,它类似于通过Drupal. settings访问它。
fzsnzjdm7#
步骤1.创建信息文件,就像我的模块名是“mymodule.info.yml”。
第2步.创建.module,以便使用hook将js文件附加到模块。
步骤3.为附加的js文件创建mymodule.libraries.yml
步骤4.创建库后,您必须创建js文件夹,然后在js文件夹中添加js/mymodule.js文件,然后您可以编写Drupal行为的代码。
以上四个步骤你可以使用Drupal行为添加js,如果你对我的博客文章有疑问,请告诉我这篇文章是否对你有帮助。
djp7away8#
回答您的所有问题:
Drupal行为到底是什么?
Drupal.behaviors是Drupal中JavaScript结构中的一个对象,它允许我们在应用程序执行期间的某些时间附加要执行的函数。它在DOM完全加载时被调用,但这些行为可以再次调用。Drupal的官方JavaScript文档建议模块应该通过将逻辑附加到Drupal. behaviors来实现JavaScript。
它为模块开发人员提供了什么类型的服务层?
Behaviors的优点是,它们可以自动重新应用于通过AJAX加载的任何内容。它们可以在任何时候用表示DOM的新添加或更改的上下文来调用。这比$(document).ready()或document DOMContentLoaded要好,后者的代码只运行一次。
Drupal Behaviors什么时候被调用?
在管理覆盖已加载到页面中之后。AJAX Form API提交表单后。当AJAX请求返回一个修改HTML的命令时,例如aExcorder_command_replace()。
它Map到jQuery.ready的关系类型是什么?
答案:使用attach方法
要记住的事情:
新对象至少需要有一个attach方法。任何时候调用Drupal.attachBehaviors,它都会遍历所有行为对象并调用它们各自的attach方法。
范例:
利用Drupal行为可以整合动态交互性,简化用户参与,增强用户反馈,更有效的开发,并为您的网站提供整体改善的用户体验。Drupal.behaviors通过允许在单个页面上执行多个操作,支持对现有行为的覆盖和扩展,并促进对通过Ajax加载的任何内容的自动重新应用,展示了自适应性和模块化。
谢谢,卡姆拉吉