在外部jQuery中使用{{twig变量}} -- theming 领域 和 8 领域 和 javascript 领域 drupal 相关 的问题

using {{ twig variables }} inside external jquery


0
vote

问题

中文

开发D8主题,我正在加载包含一些jQuery代码的外部.js文件(所以它不在枝形模板内)。

是否可以访问和修改外部jQuery内部 $status_definition = DataDefinition::create('list') ->setLabel(new TranslatableMarkup('Status')) ->setRequired(TRUE) ->setListItems([ 1 => 'One', 2 => 'Two', 3 => 'Three', ]); 0 (如 $status_definition = DataDefinition::create('list') ->setLabel(new TranslatableMarkup('Status')) ->setRequired(TRUE) ->setListItems([ 1 => 'One', 2 => 'Two', 3 => 'Three', ]); 0)?

英文原文

Developing a D8 theme, I am loading an external .js file containing some jQuery code (so it is not inside the TWIG template).

Is it possible to access and modify TWIG variables like {{ myvariable }} inside the external jQuery?

        

回答列表

2
 
vote
vote
最佳答案
 

无法直接访问jQuery中的枝条变量。而通过将它们附加到DrupalSettings来访问外部jQuery代码内的PHP变量的内容。请参阅文档:

附加可配置的JavaScript

在某些情况下,您可能希望将JavaScript添加到依赖的页面上 在一些计算的PHP信息上。

在这种情况下,创建JavaScript文件,定义和附加库 就像以前一样,但也附加了JavaScript设置并具有 JavaScript文件通过DrupalSettings(继任者)读取这些设置 到Drupal 7的Drupal.settings)。但是,要制作德国露台 可用于我们的JavaScript文件,我们必须尽量做同样的工作 必须做的是让jQuery可用:我们必须宣布依赖 它。

  cuddly-slider:   version: 1.x   js:     js/cuddly-slider.js: {}   dependencies:     - core/jquery     - core/drupalSettings   

  $build['#attached']['library'][] = 'fluffiness/cuddly-slider'; $build['#attached']['drupalSettings']['fluffiness']['cuddlySlider']['foo'] = 'bar';   

其中'栏'是一些计算值。

然后cuddly-slider.js将能够访问

drupalSettings.fluffiness.cuddlySlider.foo (and it will === 'bar').

https://www.drupal.org/developing/api/8/assets

 

It's not possible to access Twig variables in jQuery directly. Instead access the content of PHP variables inside of an external jQuery code by attaching them to drupalSettings. See the documentation:

Attaching configurable JavaScript

In some cases, you may want to add JavaScript to a page that depends on some computed PHP information.

In this case, create a JavaScript file, define and attach a library just like before, but also attach JavaScript settings and have that JavaScript file read those settings, via drupalSettings (the successor to Drupal 7's Drupal.settings). However, to make drupalSettings available to our JavaScript file, we have to do the same work as we had to do to make jQuery available: we have to declare a dependency on it.

cuddly-slider:   version: 1.x   js:     js/cuddly-slider.js: {}   dependencies:     - core/jquery     - core/drupalSettings 

and

$build['#attached']['library'][] = 'fluffiness/cuddly-slider'; $build['#attached']['drupalSettings']['fluffiness']['cuddlySlider']['foo'] = 'bar'; 

Where 'bar' is some calculated value.

Then cuddly-slider.js will be able to access

drupalSettings.fluffiness.cuddlySlider.foo (and it will === 'bar').

https://www.drupal.org/developing/api/8/assets

 
 

相关问题

0  在没有任何HTML标记的情况下获得清洁日期  ( Get clean date without any html tags ) 
我正在使用日期模块以及显示日期的视图,我需要获取日期时间戳。问题是 $fields['date_in_timestamp'] 内容在html包装。 <span class="date-display-single"> 1468473300 </span> 我只需要值,没有html。 ps:我的字段"dat...

1  从模板文件访问自定义块字段  ( Accessing custom block fields from a template file ) 
我有一个侧边栏区域"侧边栏广告" 并放置在该区域中是"映像" 类型的"侧栏广告" ,其具有两个字段"图像" 和"链接" 。 当我使用 {{ page.sidebar_ad }} 输出我的页面上的块时,我得到图像,链接彼此分开,即预期。我无法弄清楚的是,我现在一直在左右5个小时,是如何单独引用字段,所以我可以包裹图像周...

0  如果href = x,则在主菜单中更改链接的网址  ( Change url of link in main menu if href x ) 
我认为这将很简单,但我发现很难。 如果URL是某个URL,我想更改主菜单中设置的链接的URL。 我一直在看主题_menu_link()。我在我的template.php 中放下了以下内容 function MYTHEME_menu_link(array $variables) { $element = ...

2  如何在滚动时使浅色粘滞?  ( How to make views header sticky while scrolling ) 
我使用drupal视图创建了报告,我使用了apiews_merge_rows模块。现在我想创建报表表的粘性标题。可以请帮助我。 ...

2  如何将表单作为桌子呈现?  ( How do i render a form as a table ) 
默认表单布局具有在单个div标签中包装的每个表单元素,带有标签和内部输入。我想整齐地展示一些东西,并为现场标签创建一个列,以及输入区域的另一列。 我可以看到这一点以两种方式之一完成: - 我可以使用表元素或div创建一个表,并将标签与输入分开。我会用枝条吗? - 或者,也许有一个创造性的方法可以使用CSS与默认结...

4  如何在自定义菜单项中将默认的“显示为adjoard”设置为true  ( How to set the default show as expanded to true in a custom menu item ) 
我正在自定义模块中创建一系列菜单。该网站还有自定义主题。有没有办法在主题或模块中,将菜单"显示为扩展" 到真实。这样,如果我移动我的网站,卸载,或者,它会回到框中的方式。 ...

3  配置/安装目录的目的是什么?  ( What is the purpose of the config install directory ) 
我试图在omega / config /安装下使用omega主题并在很多文件下找到了很多文件。例如。 block.block.omega_account_menu.yml,block.block.omega_branding.yml,omega.layout.omega_default.yml。我想知道这些文件的功能...

2  读取字段值并将其传递给仅针对节点页面的段样式Atributes  ( Read field value and pass it to section style atributes only for node page ) 
我在内容类型中有一个颜色字段 - &gt;页面字段。我想读取此字段的值,并将此值传递为主内容的元素的背景颜色(Bootstrap Subtheme)( - 从页面,TLP.php)。并且仅适用于节点类型 - &gt;页面。 在我的template.php中,我试图使用函数theme_preprocess_page。我...

12  如何修剪身体文本(Field_Body)?  ( How to trim body text field body ) 
我为一个节点创建了一个节点的视图,该节点显示了呈现实体的内容。其中,我在枝花模板中输出身体字段: {{ content.field_body }} 现在,我想将文本限制为200个字符并放三个点。我测试了三种不同的方式来做到这一点,但没有任何工作。问题是,每种方式都计算并修剪HTML字符。 1:我添加了"管...

5  将CSS / JS添加到特定视图?  ( Add css js to particular view ) 
我遇到了解如何将库视为查看。我希望我的资产包含在/ foo中但不包括在/酒吧。我在这个不止一次且从我的理解中读过文档,这是通过使用预处理来实现的,例如: function my_theme_preprocess_page(&$variables) { if($variables['is_front']){ ...

0  TB-Megamenu如何单击“在移动设备中打开/关闭子菜单  ( Tb megamenu how to click to open close sub menu in mobile ) 
我们试图在移动浏览器上"点击" 菜单选项时仅显示子菜单。此功能在悬停时良好工作,但有些移动设备不适用于悬停。我们需要能够单击子菜单标题以便向下删除,然后再次单击它们以折叠它们。 ...

1  配置导出不适用于名称下划线的子主题  ( Configuration export not working for sub theme that has underscore in name ) 
今天有一个奇怪的问题,我有一个名为'rrre_theme'的子主题(bootstrap)。我可以在命名方面确认我在我的子主题中没有任何错误。我的位置块,一般都谈论笨拙的业务。当它发生导出我的配置时,我运行 drush cex vcs 其中,其中VCS是我 99887661 中定义的默认配置目录。到目前为止所以标准。但...

1  适当的方法来调用jQuery UI菜单小部件  ( Proper way to invoke jquery ui menu widget ) 
我正在尝试使用jQuery UI菜单小部件的菜单。 这里是我在preprocess_page hook内的模板 - preprocess.php中添加的内容: drupal_add_js('(function ($) { jQuery(document).ready(function () { jQuery( ...

1  使用Drupal_add_css以基于术语引用动态添加内联CSS  ( Using drupal add css to dynamically add inline css based on term reference ) 
我正在尝试创建一个名为 .bg-unit-color 的css类,这将根据所选的分类参考文献改变 我已经设置了一个课程类别分类,然后使用jQuery ColorPicker模块在其中设置一个颜色字段。我已经到了我可以在我的节点中呈现颜色的那一点 - example.tpl.php文件: <?php $term=...

2  从错误模糊时从哪里调用函数?  ( Where are functions being called from when errors are vague ) 
我有以下错误在浏览网站时随机显示。难以繁殖,也很难调试。我能够在错误状态下获得它,并在重新加载期间保持它,以便我调试它。 我试图进入有问题的代码,它驻留在中包含/ theme.inc 但是当转到那行1525时。它并没有真正告诉我很多。错误指出它缺少TPL文件,但没有说出哪一个,因为我假设它是由于$ template...

0  Bootstrap进度条缺少样式选项  ( Bootstrap progress bar missing style option ) 
drupal 8使用引导主题。我正在尝试在表格上创建一个进度条。我在一个没有问题的块中完成了它,但在形式中,它会失去"样式" 选项,并显示空白进度条。 我把这个: $form['pr_bar'] = [ '#markup' => '<div class="progress"> ...

4  如何显示多字段值的逗号分隔列表?  ( How to display a comma separated list of multiple field values ) 
如何将每个分类学术语值呈现为内联逗号分隔列表(或者在我的字段模板 field--node--field-tags.html.twig 文件中或甚至在视觉上添加CSS? ...

1  如何在提交自定义表单时调用模板?  ( How to call template when custom form is submitted ) 
我已经创建了自定义表单并在提交表单上,我需要从数据库获取数据,并且需要在不同模板中显示井结构化格式的内容。 我能够在提交时创建表单,我能够从数据库获取数据,但是我无法通过,将结果与另一个模板和显示该模板上的数据显示。我也尝试过 function nexposed_menu() { $items = arra...

1  我可以使用style.php吗?  ( Can i use a style php ) 
我想知道我是否可以将一个主题的样式表从style.css更改为style.php和drupal将使用它?我试过它,它没有用。 当然,我确实在Template.php中更改了文件名。还有什么我需要考虑的吗? ...

2  为什么没有加载这个模块库?  ( Why isnt this module library loaded ) 
我正在使用以下代码。 wk_elastic.info.yml name: Blablabla description: Blablabla package: BlaBlaBla type: module core: 8.x libraries: - wk_elastic/list-js depen...




© 2021 it.wenda123.org All Rights Reserved. 问答之家 版权所有


Licensed under cc by-sa 3.0 with attribution required.