javascript - Twig 多个变量和 json

javascript - Twig 多个变量和 json_encode

转载作者：行者123 更新时间：2023-12-02 15:54:03

24

4

首先，我对 Twig 还很陌生。我正在使用模板系统，以便用户可以设置一些选项来自定义模板。类似Shopify之类的东西。

我想知道是否可以获取所有设置并将它们发送到 javascript 函数以进一步处理它。

假设用户可以设置这些选项:

{{ theme.hide_label }} // option to show/hide a label
{{ theme.label_color }} // option to set a color for the label

我可以做这样的事情，然后获取这些变量并在 js 函数中使用它们:

 var hideLabel = '{{ theme.hide_label }}'; //true or false
 var labelColor = '{{ theme.label_color }}'; // #000000

不幸的是，我有很多设置，所以这将是一个很长的列表。

我读过有关 json_encode 的内容。但是如何将所有这些设置/选项分组为可用于某个功能的内容？

类似这样的事情:

var themeFunctions = {{ theme.label; theme.hidelabel; | t_json | raw }}

我见过有人这样做，用 Twig 翻译大量文本:

var translations = {{ 'Add; Wishlist; Information; Add to wishlist;' | t_json | raw }};

然后创建一个像这样的函数:

function getAjaxTranslation(key) {
  var translation;
  if (translation = eval('translations["' + key + '"]')) {
    return translation;
  }
  return key;
}

可以对非纯文本的变量执行类似的操作吗？

最佳答案

您可以使用json_encode用 Twig 过滤。

数据属性

<body data-theme-setting='{{ theme|json_encode|raw }}'>

脚本 block 内

<script type="text/javascript">
    var themeSetting = JSON.parse('{{ theme|json_encode|raw }}');
</script>

隐藏输入

<input type="hidden" id="themeSetting" value='{{ theme|json_encode|raw }}' />

如果你的主题变量是普通对象，你可以直接编码，如果不是或者你想为变量创建白名单，请使用 set并创建新变量然后对其进行编码。

{% set themeSetting = {
    foo : theme.foo,
    label_color : theme.label_color,
    username: theme.user.name
}|json_encode %}
<body data-theme-setting='{{ themeSetting|raw }}'></body>

Example fiddle

感谢@JoelM ，该解决方案的一个弱点是内容带有单引号。我们需要像下面这样手动转义单引号来解决这个问题。

{% set themeSetting = {
    foo: "lorem's ipsum dolor's sit",
    label_color : "hello world",
    username: "this text have the ' single quote"
}|json_encode %}
<body data-theme-setting='{{ themeSetting|replace({"'":"\\'"})|raw }}'></body>

Example fiddle

关于javascript - Twig 多个变量和 json_encode，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31706917/

24

4

0

文章推荐： javascript - 使用分位数的 d3 键汇总

文章推荐： javascript - 如何删除 Meteor 中的文档

文章推荐： javascript - 尝试访问数组中的元素时出现 Javascript 错误

文章推荐： javascript - setTimeout 以奇怪的方式使用闭包上下文

twig - 如何在 Twig 模板中转义 Twig 分隔符？
Twig 使用 {{ }}、{% %}、{# #} 分隔符。但是如何在 Twig 模板中显示 {{ }} 呢？我不是在谈论 HTML 转义。我问这个问题是因为我想在我的 Twig 模板中包含一个
twig - Twig 中不允许转换编码
为了转换我的法语 html 口音，我尝试通过在 Twig 中执行此操作来更改编码: {{ ddf.description | convert_encoding('UTF-8', 'HTML-ENTIT
twig - twig 文件中的增量值
我有一个带有输出元素的 .twig 文件的循环。我需要为每个元素增加一个值。我知道如何在 PHP 中执行此操作，但不清楚如何使用 twig 文档执行此操作。我真的不能在 Controller 中做到
symfony2 - twig - 如何从 Twig 模板内部渲染 Twig 模板
我有一个 xxx.html.twig 文件，它显示一个页面，但是当我想用不同的数据刷新页面并用新数据更新它时，我有一个选择和一个提交按钮。问题是我不知道如何在 Controller 中调用一个 Act
twig - Twig 和液体有什么区别？
我需要使用 Liquid 来创建模板，但可能只能访问 Twig 模板语言。这两种语言基本上是相同的东西，还是语言上存在差异，导致很难使用 Twig 来替代 Liquid？最佳答案 Twig 和 Li
twig - Twig 可以将数字四舍五入到最接近的千位吗？
number rounding 的 Twig 文档谈论四舍五入小数，但我有一个案例，我想将 19,995 这样的数字四舍五入到 20,000。是否有一种巧妙的方法可以四舍五入到最接近的千位？最佳答案
twig - Symfony 和 PhpStorm twig 没有给我任何关于 twig 函数的建议
我在 2.7 和 3.1 版本中都有 Symfony 项目。 PhpStorm 启用了 Symfony 插件和 Twig 支持插件。当我在 Symfony 2.7 版本的 PhpStorm 中工作时
twig - Whiteoctober/breadcrumbs-bundle 与 twig/twig 3.0 不兼容
我已升级到新版本的 twig/twig 3.x.x。从 twig 版本 3.0 开始，Twig_Extension 已被弃用。所以我接下来要讨论“whiteoctober/breadcrumbs-bu
twig - 用满足 Twig 条件的元素包装内容
我在 Twig 中经常有类似的样板代码: {% if (somelongcond) %} {% endif %} Some long content {% if (somelongcond)
twig - 从插件中覆盖 Twig 模板
我想在我自己的插件中覆盖来自插件的 Twig 模板的 block 。我过去曾覆盖过 native 商店软件模板，但我在使用插件模板时遇到了麻烦。我正在尝试调整的插件是 FroshProductCom
twig - 如何在 Twig 中设置默认主题？
我用带 Twig 的silex；我创建自定义 form_div_layout 并将其放在 webroot 中(例如) 我这样注册 TwigService 提供者 $app->register
twig - Twig 中的动态变量，例如？
我不太明白 Twig 中的属性函数是如何工作的。有人可以帮我举个例子吗？我在 SQL 中有一个名为动态的字段。我可以是例如“field27”，但我不知道号码，号码保存在 radio.id 中。我想做
twig - 在 TWIG 中创建多语句指令
我想知道是否有一种方法可以在 TWIG 中创建多语句示例:两个单独的语句... {% set foo:bar %} {% set baz:qux %} 合并成一个语句 {% set foo:
twig - 使用 Twig 扩展
我正在尝试使用 Twig i18n 扩展。据我所知，我需要的文件在这里: https://github.com/fabpot/Twig-extensions/blob/master/lib/Twig
twig - Patternlab Twig 包含参数
我正在使用 patternlab 的节点版本用 Twig 作为模板引擎。我正在使用 twig，因为我的代码库是用 twig 编写的 - 所以使用 mustache 不是一个选项。我简单地尝试包含一个
twig - 如何从 Twig 中的字符串中删除新行
我有以下代码: {% set pageDescription = item.description|length > 197 ? item.description|striptags|trim|sli
twig - 在 Twig 中循环并在三次迭代后中断
我有以下 Twig 代码: {% for likeditem in user.getItemLikes() %} //iterate over each liked items here {%
twig - Twig 中的重复 block
反正有没有像这样在 Twig 中重复一个块: {% block title %}{% endblock %} | MyBusiness 为了只声明两个块一次？像那样: {% block title
twig - 如何在 Twig 上调用ucwords？
编辑:2016年12月3日想学习如何向 Twig 添加自定义扩展(过滤器)吗？请参阅this answer的lxg 您是否只需要找到与ucword等效的嫩枝？请参阅this answer的Javie
twig - 如何将标量 Twig 过滤器映射到数组
我有一个简单的浮点数组。我需要将它显示为逗号分隔的字符串。 {{ arr|join(', ') }} 由于过度的微不足道的准确性，这是一个糟糕的解决方案。 {% for val in arr %}

首页

博学

6Ren·AI

商城

javascript - Twig 多个变量和 json_encode